/*
Theme Name: Chroma Care Corporate
Theme URI: https://chromacare.pk/
Author: Hassan Aziz
Description: Corporate homepage theme for Chroma Care (Private) Limited. Sticky two-row header with search, hero statement slider, product grid, stat band, news carousel with promo sidebar, and a light footer. Built on Chroma Care's own teal and lime brand colours.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chroma-corporate
Tags: custom-colors, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ===== WP admin bar clearance for the sticky header ===== */
.admin-bar .site-head { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-head { top: 46px; } }

/* ===== screen reader text (WP standard) ===== */
.screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  clip-path:none;width:auto;height:auto;margin:0;padding:15px 23px 14px;
  display:block;top:5px;left:5px;z-index:100000;background:#fff;color:#1a1a1a;
}

/* ===== fallback page content (page.php / index.php / 404.php) ===== */
.cc-page{max-width:860px;margin-inline:auto;padding:clamp(48px,6vw,90px) max(20px,env(safe-area-inset-left,0px))}
.cc-page h1{font-family:var(--f-head);font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;margin:0 0 1.4rem;text-transform:uppercase}
.cc-page a{color:var(--primary)}
.cc-page img{height:auto}
.page-links{margin-top:1.5rem}


/* ============================================================
   Built to measured values taken off the rendered nimir.com.pk
   at 1440px. Every number below was read from the live page.
     container      997px
     header         110px, fixed, transparent
     nav            Lato 12px / 400 / uppercase / 1px tracking
     section head   Montserrat 40px / 58px / 600 / uppercase / #1a1a1a
                    first word in a span with border-top 4px #4c73b1
     body           Lato 15px / 18px / 400 / #333, p margin-bottom 22.5px
     alt band       #f2f2f2
     primary        #00468B        secondary #4c73b1
     footer         WHITE, text #333, links in the brand colour
   ============================================================ */
:root{
  /* Chroma Care's own marks, sampled from the logo file:
     teal #13A89F, lime #D7DF20, near-black wordmark #040706.
     These take the roles Nimir gives #00468B and #4c73b1. */
  --primary:#13A89F;        /* logo teal: bars, buttons, links */
  --secondary:#0D7C76;      /* deeper teal: outlines and hover fills */
  --accent:#D7DF20;         /* logo lime: the 4px heading rules */
  --heading:#1a1a1a;
  --text:#333333;
  --faded:#999999;
  --bg:#ffffff;
  --bg-alt:#f2f2f2;
  --border:#e8e8e8;
  --top-bg:#f5f5f5;
  --container:997px;
  color-scheme:light;

  --f-head:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Lato","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
.screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-weight:400;font-size:15px;line-height:18px;
  -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:80;background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
section[id],footer[id]{scroll-margin-top:120px}

.wrap{
  max-width:var(--container);margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.wrap--wide{max-width:1200px}

/* section padding, as measured */
.sec-who{padding-block:80px}
.sec-group{padding:100px 0 50px;background:var(--bg-alt)}
.sec-news{padding-block:70px}
.sec-news{padding-block:70px 80px}
.sec-clients{padding-block:70px 80px}

/* ---------- headings ----------
   One line. Montserrat 40/58 600 uppercase. The rule is a 4px border-top
   on a span around the first word only — exactly as on the source page. */
h1,h2,h3,h4{font-family:var(--f-head);color:var(--heading);margin:0;font-weight:600}
.sec-title{
  font-size:40px;line-height:58px;text-transform:uppercase;font-weight:600;
  color:var(--heading);margin:0 0 26px;
}
.sec-title .r{border-top:4px solid var(--accent)}
.sec-title--center{text-align:center}
p{margin:0 0 22.5px}
p:last-child{margin-bottom:0}

/* ---------- head ----------
   Solid white and sticky: it occupies flow space, so the hero starts
   beneath it rather than running behind it.
   Source: --header-height 120px, --header-sticky-height 100px. */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:60;background:#fff}

/* Two rows on the right: nav on top, socials + search beneath.
   Logo sits at the left across both. */
.hdr{background:#fff;transition:box-shadow .3s ease}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:120px;transition:height .3s ease}
.site-head.solid .hdr{box-shadow:0 1px 12px rgba(0,0,0,.09)}
.site-head.solid .hdr .wrap{height:100px}
/* sized by HEIGHT: the Chroma mark is 2.3:1, not the 5:1 of a wordmark logo,
   so a fixed width would make it tower over the bar */
.brand img{height:66px;width:auto;transition:height .3s ease}
.site-head.solid .brand img{height:56px}

.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}

/* second row: socials + search */
.hdr-tools{display:flex;align-items:center;gap:18px;padding-right:11px}
.hdr-socials{display:flex;gap:14px}
.hdr-socials a{display:grid;place-items:center;color:var(--faded);transition:color .2s}
.hdr-socials a:hover{color:var(--primary)}
.hdr-socials svg{width:15px;height:15px;fill:currentColor}
.hdr-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.hdr-search input{
  width:130px;background:none;border:0;padding:4px 0;outline:none;
  font-family:var(--f-body);font-size:14px;color:var(--text);
}
.hdr-search input::placeholder{color:var(--faded)}
.hdr-search button{background:none;border:0;padding:0;cursor:pointer;color:var(--heading);display:grid;place-items:center}
.hdr-search button:hover{color:var(--primary)}
.hdr-search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.nav{display:flex;align-items:center;min-width:0}
/* wp_nav_menu output: nav > ul.nav-list > li.menu-item [> ul.sub-menu] */
.nav-list{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.nav-list > li{position:relative}
.nav-list > li > a{
  position:relative;display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--f-body);font-size:12px;font-weight:400;letter-spacing:1px;
  text-transform:uppercase;color:var(--heading);padding:0 11px;height:46px;
  transition:color .2s;white-space:nowrap;
}
.nav-list > li > a:hover{color:var(--primary)}
.nav-list > li.current-menu-item > a,
.nav-list > li.current_page_item > a{color:var(--primary)}
/* caret drawn in CSS so no walker class is needed */
.nav-list > li.menu-item-has-children > a::after{
  content:"";width:6px;height:6px;flex:none;margin-left:.1em;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

.nav-list .sub-menu{
  position:absolute;left:0;top:100%;min-width:250px;background:#fff;list-style:none;
  border-top:3px solid var(--primary);box-shadow:0 12px 30px rgba(0,0,0,.15);
  margin:0;padding:.3rem 0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:5;
}
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav-list .sub-menu a{
  display:block;padding:.6rem 1.1rem;font-size:13px;line-height:1.4;color:var(--text);
  border-bottom:1px solid var(--border);transition:background .2s,color .2s,padding-left .2s;
}
.nav-list .sub-menu li:last-child a{border-bottom:0}
.nav-list .sub-menu a:hover{background:var(--bg-alt);color:var(--primary);padding-left:1.4rem}
/* toggle injected by JS for touch widths */
.sub-toggle{
  display:none;background:none;border:0;padding:10px 14px;cursor:pointer;
  color:var(--heading);line-height:0;
}
.sub-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav-list > li.open > .sub-toggle svg{transform:rotate(180deg)}
.burger{display:none;border:1px solid var(--border);padding:.5rem .65rem;cursor:pointer;background:transparent}
.burger i{display:block;width:20px;height:2px;background:var(--heading);margin:4px 0;transition:transform .2s}
.burger:active i{transform:scaleX(.85)}

/* ---------- hero slider ----------
   Statement per slide, set at the top with a short rule beneath it.
   Circular arrows on the left and right edges. No dots.
   Background crossfades and pans slowly sideways while it is the active slide. */
.hero{position:relative;overflow:hidden;background:#0f1a22;isolation:isolate;min-height:660px}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slides .s{
  position:absolute;inset:0;opacity:0;overflow:hidden;
  transition:opacity 1.2s ease;
}
.hero-slides .s.on{opacity:1}
.hero-slides .s i{
  position:absolute;inset:-4% -6%;display:block;
  background-size:cover;background-position:center;
  transform:scale(1.04);
}
/* the slow sideways drift, running only on the slide that is showing */
.hero-slides .s.on i{animation:heroPan 22s linear infinite alternate}
@keyframes heroPan{
  from{transform:scale(1.06) translateX(-2.2%)}
  to{transform:scale(1.06) translateX(2.2%)}
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,18,28,.74) 0%,rgba(10,18,28,.42) 190px,rgba(10,18,28,.2) 340px),
    linear-gradient(90deg,rgba(10,18,28,.55) 0%,rgba(10,18,28,.3) 55%,rgba(10,18,28,.42) 100%);
}
.hero-inner{
  position:relative;z-index:2;max-width:1390px;margin-inline:auto;min-height:660px;
  padding-block:86px 90px;
  padding-left:max(58px,env(safe-area-inset-left,0px));
  padding-right:max(58px,env(safe-area-inset-right,0px));
}
.hero-copy{max-width:1010px;color:#fff}
.hero h1{
  color:#fff;font-size:46px;line-height:52px;text-transform:uppercase;
  font-weight:600;margin:0;letter-spacing:.2px;
}
/* rule sits BELOW the statement here, unlike the section headings */
.hero-rule{display:block;width:85px;height:4px;background:var(--accent);margin-top:22px}

/* each statement animates up as its slide becomes active */
.hero-copy{opacity:0;transform:translateY(16px)}
.hero-slide-copy.on .hero-copy{animation:heroUp .9s cubic-bezier(.22,.61,.36,1) .15s forwards}
@keyframes heroUp{to{opacity:1;transform:none}}
.hero-slide-copy{display:none}
.hero-slide-copy.on{display:block}

.hero-arrow{
  position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  padding:0;cursor:pointer;border:0;background:rgba(32,32,32,.78);color:#fff;
  transition:background .25s,transform .2s;
}
.hero-arrow:hover{background:rgba(32,32,32,.95)}
.hero-arrow:active{transform:translateY(-50%) scale(.92)}
.hero-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero-prev{left:40px}
.hero-next{right:40px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-body);font-size:14px;line-height:1;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;padding:14px 28px;border:1px solid var(--primary);
  background:var(--primary);color:#fff;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .16s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--primary)}
.btn:active{transform:scale(.97)}
.btn--light{background:transparent;border-color:#fff;color:#fff}
.btn--light:hover,.btn--light:focus-visible{background:#fff;color:var(--heading)}

/* the plain text link the source uses for Read More */
.textlink{
  display:inline-flex;align-items:center;gap:.35em;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--f-body);font-size:14px;font-weight:400;color:var(--primary);
  border-bottom:1px solid var(--primary);line-height:1.5;transition:opacity .2s;
}
.textlink:hover{opacity:.7}
.textlink svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.textlink[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------- who we are ---------- */
.who p{max-width:997px}
.who-more{display:none}
.who-more.open{display:block}
.who-extra{margin-top:18px}

/* ---------- our range (the "Our Group" slot) ----------
   Greyscale photo with a solid teal caption bar beneath it: white, centred,
   uppercase. Measured card 370 wide, image 230 tall, bar 55 tall, 24px gaps. */
.sec-group > .wrap{max-width:1600px;padding-inline:2.5rem}
.group4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:4px}
.gcard{display:block;position:relative;overflow:hidden}
.gcard figure{margin:0;position:relative;overflow:hidden;aspect-ratio:370/230;background:#e4e8ec}
.gcard img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:transform .6s ease,filter .4s ease;
}
.gcard:hover img{transform:scale(1.06);filter:grayscale(0)}
.gcard-cap{
  display:grid;place-items:center;min-height:55px;padding:14px 12px;text-align:center;
  background:var(--primary);color:#fff;
  font-family:var(--f-body);font-size:15px;font-weight:400;
  letter-spacing:.3px;text-transform:uppercase;line-height:1.3;
  transition:background .25s;
}
.gcard:hover .gcard-cap{background:var(--heading)}

/* ---------- full-width teal band (296px on the source) ---------- */
.statband{background:var(--primary);color:#fff;padding-block:62px}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.nb h3{color:#fff;font-family:var(--f-head);font-size:30px;line-height:1.1;font-weight:600;margin-bottom:8px}
.nb p{font-size:14px;line-height:20px;color:rgba(255,255,255,.82);margin:0;text-transform:uppercase;letter-spacing:.6px}

/* ---------- news & events + promo sidebar ----------
   One news item at a time inside a grey panel, with the two promo boxes
   stacked in a narrow column to its right. */
/* ---- values below are lifted straight from the source stylesheet ----
   .l-section          padding-inline: 2.5rem, full width (no max-width)
   columns             vc_col-sm-9 / vc_col-sm-3 with 1.5rem inner padding
   .usg_hwrapper_1     margin-left:10%  padding-block:6%  bg #f5f5f5
   .usg_post_image_1   width:50%  margin-left:-11%
   .usg_vwrapper_1     width:48%  margin-left:7%  gap .7rem
   hwrapper gap        1.2rem, align-items:center, flex-wrap:wrap
   owl transition      450ms cubic-bezier(.78,.13,.15,.86)
   .usg_btn_1          transparent, 1px solid #4c73b1                      */
.sec-news > .wrap{max-width:none;padding-inline:2.5rem}
.news-grid{display:flex;align-items:flex-start;gap:10px}
.news-col-main{width:75%;padding-inline:1.5rem;min-width:0}
/* pulled up so the first promo box lines up with the top of the news panel
   rather than sitting below the section heading */
.news-col-side{width:25%;padding-inline:1.5rem;min-width:0;margin-top:-107px}

/* this heading is wrapped in a link on the source, so it takes the link
   colour while its rule stays the same accent as every other heading */
.sec-title--link{color:var(--primary)}

.news-panel{position:relative}
/* the grey band itself, indented 10% with 6% block padding */
.news-slide{
  display:none;flex-wrap:wrap;align-items:center;gap:1.2rem;
  margin-left:10%;padding-block:6%;background:#f5f5f5;
}
.news-slide.on{display:flex}
/* owl's own easing and duration */
@keyframes newsFromRight{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}
@keyframes newsFromLeft{from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:none}}
.news-slide.on.from-right{animation:newsFromRight .45s cubic-bezier(.78,.13,.15,.86) both}
.news-slide.on.from-left{animation:newsFromLeft .45s cubic-bezier(.78,.13,.15,.86) both}
.news-media{
  width:50%;margin-left:-11%;
  aspect-ratio:3/2;overflow:hidden;background:#e4e8ec;
}
.news-media img{width:100%;height:100%;object-fit:cover}
.news-body{
  width:48%;margin-left:7%;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
}
.ndate{font-family:var(--f-body);font-size:.9rem;font-weight:400;color:var(--text);margin:0}
.news-body h3{
  font-family:var(--f-head);font-size:15px;line-height:1.2;font-weight:700;
  color:var(--heading);margin:0;
}
.nexc{font-size:.9rem;line-height:1.45;color:var(--text);margin:0}
/* source: transparent background, 1px solid #4c73b1 */
.seemore{
  display:inline-block;margin-top:.5rem;
  background:transparent;border:1px solid var(--secondary);color:var(--heading);
  font-family:var(--f-body);font-size:15px;letter-spacing:.2px;text-transform:uppercase;
  padding:13px 22px;line-height:1.1;transition:background .25s,color .25s;
}
.seemore:hover{background:var(--secondary);color:#fff}
/* navstyle_circle, arrows-ver-pos_middle, arrows-hor-pos_on_sides_outside,
   --arrows-size:1.5rem, --arrows-gap:10px */
.news-prev,.news-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  padding:0;cursor:pointer;background:transparent;border:1px solid var(--secondary);
  color:var(--heading);z-index:3;
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.news-prev:hover,.news-next:hover{background:var(--secondary);border-color:var(--secondary);color:#fff}
.news-prev:active,.news-next:active{transform:translateY(-50%) scale(.94)}
.news-prev svg,.news-next svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* sat outside the carousel column on each side */
.news-prev{left:calc(-3rem - 10px)}
.news-next{right:calc(-3rem - 2px)}

/* sits in the middle third of a 3-column row on the source */
.brochure-row{display:flex;justify-content:center;margin-top:42px}
.brochure{gap:.6em}
.brochure svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* promo boxes: teal label bar on top, image, grey Read More strip */
.promo-col{display:grid;gap:30px}
.promo{display:block}
.promo-label{
  background:var(--primary);color:#fff;padding:5px 10px;
  font-family:var(--f-body);font-size:14px;font-weight:400;text-transform:uppercase;
  line-height:1.4;letter-spacing:.3px;
}
/* source images are 1024x611, so the crop is landscape, not near-square */
.promo figure{margin:0;aspect-ratio:1024/611;overflow:hidden;background:#e4e8ec}
.promo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .6s ease,filter .4s ease}
.promo:hover img{transform:scale(1.05);filter:grayscale(0)}
.promo-more{
  display:block;background:#f1f1f1;padding:9px 10px;
  font-family:var(--f-body);font-size:15px;color:var(--primary);line-height:1.4;
  transition:background .25s;
}
.promo:hover .promo-more{background:#e7e7e7}

/* ---------- logo wall ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem);margin-top:10px}
.logos img{height:74px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s,transform .3s}
.logos img:hover{filter:none;opacity:1;transform:scale(1.05)}

/* ---------- footer: WHITE, as measured ---------- */
.ftr{background:#fff;border-top:1px solid var(--border);color:var(--text)}
.ftr-top{padding-block:52px 44px}
.ftr-cols{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.15fr;gap:34px}
.ftr-brand img{width:200px;height:auto;margin-bottom:16px}
.ftr-brand p{font-size:14px;line-height:21px;color:var(--text);margin:0 0 18px;max-width:34ch}
.ftr h4{
  font-family:var(--f-head);color:var(--heading);font-size:15px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;margin:0 0 14px;
}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{
  display:block;font-size:14px;font-weight:300;line-height:17px;padding-block:5px;
  color:var(--primary);transition:color .2s,transform .2s;
}
.ftr li a:hover{color:var(--heading);transform:translateX(3px)}
.ftr-contact p{font-size:14px;line-height:21px;color:var(--text);margin:0 0 12px}
.ftr-contact strong{display:block;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--heading);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

.subftr{background:var(--top-bg);border-top:1px solid var(--border)}
.subftr .wrap{
  padding-block:16px;display:flex;flex-wrap:wrap;gap:10px 28px;
  align-items:center;justify-content:space-between;font-size:13px;line-height:1.6;color:var(--faded);
}
.subftr a{color:var(--primary);transition:opacity .2s}
.subftr a:hover{opacity:.7}
.sub-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.socials{display:flex;gap:8px}
.socials a{
  width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);color:var(--primary);
  transition:background .25s,border-color .25s,color .25s,transform .18s;
}
.socials a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.socials a:active{transform:scale(.9)}
.socials svg{width:14px;height:14px;fill:currentColor}

/* ---------- motion ---------- */
.js-anim .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js-anim .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav-list > li > a{padding:0 8px}
  .group4{grid-template-columns:repeat(2,1fr)}
  .sec-news > .wrap{padding-inline:1.25rem}
  .news-col-main,.news-col-side{padding-inline:.75rem}
  .news-prev{left:-1.6rem}
  .news-next{right:-1.6rem}
  .news-prev,.news-next{width:2.6rem;height:2.6rem}
  .news-prev svg,.news-next svg{width:1.2rem;height:1.2rem}
  .statband .wrap{grid-template-columns:repeat(2,1fr);gap:34px}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block;border-color:var(--border)}
  .burger i{background:var(--heading)}
  /* below this width the bar is always solid white, so the menu panel reads */
  .hdr{background:#fff;box-shadow:0 1px 12px rgba(0,0,0,.09)}
  .hdr .wrap,.site-head.solid .hdr .wrap{height:76px;position:relative}
  .brand img,.site-head.solid .brand img{height:50px;width:auto;filter:none}
  .hdr-tools{display:none}
  .hdr-right{display:contents}
  .hero,.hero-inner{min-height:520px}
  .hero-inner{padding-block:64px 70px;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
  .hero h1{font-size:34px;line-height:41px}
  .hero-arrow{width:40px;height:40px}
  .hero-prev{left:14px}
  .hero-next{right:14px}
  /* sidebar drops below the news panel and the two boxes sit side by side */
  /* columns stack; the sidebar boxes go side by side underneath */
  .news-grid{flex-direction:column;gap:26px}
  .news-col-main,.news-col-side{width:100%;padding-inline:0}
  /* stacked, so the pull-up would drag the boxes over the panel */
  .news-col-side{margin-top:0}
  .promo-col{grid-template-columns:1fr 1fr;gap:22px}
  .news-prev{left:0}
  .news-next{right:0}
  .ftr-cols{grid-template-columns:repeat(2,1fr)}
  .ftr-brand{grid-column:1 / -1}
  .site-head.open .nav{
    display:flex;position:absolute;left:0;right:0;top:100%;background:#fff;
    flex-direction:column;align-items:stretch;max-height:70vh;overflow-y:auto;
    padding:0 max(16px,env(safe-area-inset-left,0px)) 12px;
    box-shadow:0 16px 26px rgba(0,0,0,.14);
  }
  .site-head.open .nav-list{flex-direction:column;align-items:stretch;width:100%}
  .site-head.open .nav-list > li{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--border);
  }
  .site-head.open .nav-list > li > a{flex:1;height:auto;padding:14px 0;font-size:13px}
  .site-head.open .nav-list > li.menu-item-has-children > a::after{display:none}
  .site-head.open .sub-toggle{display:block}
  .site-head.open .nav-list .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border-top:0;border-left:3px solid var(--primary);
    width:100%;margin:0 0 8px 8px;display:none;
  }
  .site-head.open .nav-list > li.open > .sub-menu{display:block}
}
@media (max-width:620px){
  .sec-title{font-size:28px;line-height:40px}
  .hero h1{font-size:27px;line-height:34px}
  .hero,.hero-inner{min-height:440px}
  .hero-rule{width:70px;margin-top:18px}
  .group4{grid-template-columns:1fr}
  .statband .wrap{grid-template-columns:1fr;gap:26px}
  /* the source's own 600px rules: panel goes flush, image full width,
     text inset 7% with 5%/7% margins */
  .news-slide{margin-left:0;margin-right:0;padding-block:0;gap:0}
  .news-media{width:100%;margin-left:0;margin-right:0}
  .news-body{width:86%;margin:5% 7% 7% 7%}
  .news-prev,.news-next{top:auto;bottom:-1.3rem;transform:none;width:2.6rem;height:2.6rem;background:#fff}
  .news-prev{left:12px}
  .news-next{right:12px}
  .news-prev:active,.news-next:active{transform:scale(.94)}
  .brochure-row{margin-top:48px}
  .seemore{padding:15px 24px;font-size:15px}
  .promo-col{grid-template-columns:1fr}
  .ftr-cols{grid-template-columns:1fr}
  .logos img{height:56px}
  .subftr .wrap{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::after,*::before{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  /* an infinite alternating pan at near-zero duration would judder, so stop it outright */
  .hero-slides .s.on i{animation:none!important;transform:scale(1.02)}
  .hero-copy{opacity:1;transform:none}
}