/* Layout: full-width brand bands (navy / white) with a centered 1180px content column */
:root{
  --navy:#354a82;
  --navy-deep:#204888;
  --navy-ink:#263f6d;
  --orange:#f29a2e;
  --orange-dark:#d9821a;
  --ink:#2b2f38;
  --muted:#5b6170;
  --line:#e3e6ee;
  --paper:#ffffff;
  --mist:#f5f7fb;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --label:"Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --body:"Figtree", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap:1180px;
  --gutter:max(20px, env(safe-area-inset-left, 0px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px));
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-999px;top:0;background:var(--orange);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* =========================================================
   Header and menu
   Markup: partials/header.html. Behaviour: assets/nav.js.
   Two layouts share one set of markup:
     - up to 1023px: compact bar + slide-in menu ("drawer")
     - 1024px and up: utility strip + single-row menu
   The 1023px breakpoint is repeated in nav.js; change both together.
   ========================================================= */

/* ----- Shared ----- */
:root{--header-cta-w:192px} /* width of Get a Proposal; the LinkedIn link above it is centred on the same width */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:12px}
.logo{flex:none;margin-right:auto}
.icon-phone{width:16px;height:16px;fill:currentColor;flex:none}
.nav-list,.service-list,.nav-utility{list-style:none;margin:0;padding:0}
.nav-list > li > a,.nav-trigger{display:flex;align-items:center;gap:9px;font:700 13px/1 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.nav-list > li > a[aria-current="page"],.has-panel:has([aria-current="page"]) > .nav-trigger{color:var(--orange-dark)}
.nav-trigger::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.has-panel.is-open > .nav-trigger::after{transform:translateY(2px) rotate(225deg)}
.service-list a{display:block;text-decoration:none;color:var(--ink)}
.service-name{display:block;font:700 13px/1.3 var(--label);letter-spacing:.06em;text-transform:uppercase}
.service-desc{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.service-list a[aria-current="page"] .service-name{color:var(--orange-dark)}
@media (hover:hover){
  .nav-list > li > a:hover,.nav-trigger:hover,.service-list a:hover .service-name{color:var(--orange-dark)}
}
.utility-link{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--label);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.nav-phone{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 var(--label);letter-spacing:.04em;color:var(--navy-deep);text-decoration:none;white-space:nowrap}
.nav-cta{white-space:nowrap}

/* ----- Phones and tablets: compact bar + slide-in menu ----- */
@media (max-width:1023px){
  .utility-bar{display:none}
  .header-inner{min-height:60px;gap:8px}
  .logo img{width:140px}
  .header-call,.menu-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;font:700 13px/1 var(--label);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:2px solid var(--navy-deep)}
  .header-call{color:var(--navy-deep);background:#fff}
  .menu-toggle{color:#fff;background:var(--navy-deep)}
  .menu-toggle-bars{width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}

  html.nav-open{overflow:hidden}
  html.nav-open .site-header{z-index:80} /* above the proposal card */
  .nav-backdrop{position:fixed;inset:0;z-index:1;background:rgba(18,36,72,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
  .site-nav{position:fixed;top:0;right:0;bottom:0;z-index:2;width:min(400px,100%);display:flex;flex-direction:column;background:#fff;box-shadow:-18px 0 40px rgba(18,36,72,.2);transform:translateX(100%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s .28s}
  html.nav-open .nav-backdrop{opacity:1;visibility:visible;transition-delay:0s}
  html.nav-open .site-nav{transform:none;visibility:visible;transition-delay:0s}

  .nav-head{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:60px;padding:0 8px 0 var(--gutter);border-bottom:1px solid var(--line)} /* same height and logo size as the bar, so the logo stays put when the menu opens */
  .nav-logo img{width:140px}
  .nav-close{position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--navy-deep)}
  .nav-close::before,.nav-close::after{content:"";position:absolute;left:12px;right:12px;top:21px;height:2px;background:currentColor;transform:rotate(45deg)}
  .nav-close::after{transform:rotate(-45deg)}

  .nav-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--gutter-r) 20px var(--gutter)}
  .nav-list > li > a,.nav-trigger{width:100%;justify-content:space-between;padding:17px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .nav-panel{display:none;padding:6px 0 12px;border-bottom:1px solid var(--line)}
  .has-panel.is-open > .nav-panel{display:block}
  .has-panel.is-open > .nav-trigger{border-bottom:0}
  .service-list a{padding:11px 0 11px 14px;border-left:2px solid var(--line)}
  .service-list a[aria-current="page"]{border-left-color:var(--orange)}
  .service-name{font-weight:600;letter-spacing:.05em}
  .service-desc{display:none}
  .nav-utility{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:16px}
  .nav-utility .utility-link{padding:12px 0;color:var(--navy-deep)}

  .nav-actions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px var(--gutter-r) calc(14px + env(safe-area-inset-bottom,0px)) var(--gutter);border-top:1px solid var(--line);background:#fff}
  .nav-phone,.nav-cta{min-height:48px;padding:0 8px}
  .nav-phone{border:2px solid var(--navy-deep);font-size:14px}
  .nav-cta{font-size:13px;letter-spacing:.06em}
}
/* Narrowest phones: the call button keeps its icon and drops the word. */
@media (max-width:359px){
  .logo img{width:120px}
  .header-call{width:44px;padding:0;justify-content:center;font-size:0;gap:0}
  .nav-actions{grid-template-columns:1fr}
}

/* ----- Desktop: utility strip + single-row menu ----- */
@media (min-width:1024px){
  .utility-bar{background:var(--navy-deep)}
  .utility-inner{display:flex;justify-content:flex-end;gap:28px}
  .utility-bar .utility-link{width:var(--header-cta-w);justify-content:center;padding:11px 0;color:#fff}
  .utility-bar .utility-link:hover{color:var(--orange)}

  .header-call,.menu-toggle,.nav-head,.nav-list > .nav-home,.nav-utility,.nav-backdrop{display:none}
  .header-inner{min-height:72px;align-items:stretch}
  .logo{display:flex;align-items:center}
  .logo img{width:176px}
  .site-nav,.nav-list,.nav-list > li:not(.nav-home),.nav-actions{display:flex;align-items:center}
  .site-nav,.nav-list,.nav-list > li{align-self:stretch}
  .site-nav{gap:16px}
  .nav-scroll{display:contents}
  .nav-list > li > a,.nav-trigger{padding:12px 10px;white-space:nowrap}

  .has-panel{position:relative}
  .nav-panel{position:absolute;top:100%;left:-14px;width:min(680px,calc(100vw - 40px));padding:14px;background:#fff;border-top:3px solid var(--orange);box-shadow:0 18px 40px rgba(32,72,136,.18);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility 0s .16s}
  .has-panel.is-open > .nav-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .service-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
  .service-list a{padding:12px 14px}
  .service-list a:hover,.service-list a[aria-current="page"]{background:var(--mist)}

  .nav-actions{gap:18px}
  .nav-cta{width:var(--header-cta-w);padding:13px 0}
}
/* Mouse users also get the panel on hover. */
@media (min-width:1024px) and (hover:hover){
  .has-panel:hover > .nav-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .has-panel:hover > .nav-trigger::after{transform:translateY(2px) rotate(225deg)}
}
/* Small laptops and landscape tablets: the phone number collapses to a call button. */
@media (min-width:1024px) and (max-width:1199px){
  .logo img{width:160px}
  .site-nav{gap:12px}
  .nav-list > li > a,.nav-trigger{padding-inline:8px;font-size:12.5px;letter-spacing:.06em}
  .nav-phone{width:44px;height:44px;border:2px solid var(--navy-deep);border-radius:50%}
  .nav-phone span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (prefers-reduced-motion:reduce){
  .site-nav,.nav-backdrop,.nav-panel,.nav-trigger::after{transition:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:url("/images/2020-07/beautiful-shot-of-the-modern-style-open-space-offi-2025-02-02-20-30-25-utc-scaled.jpeg") center/cover no-repeat;min-height:620px;display:flex;align-items:flex-end}
.hero .wrap{width:100%;display:flex;justify-content:flex-end;padding-block:0}
.hero-card{background:#fff;padding:42px 48px 46px;max-width:720px;width:100%}
.hero-brand-line{white-space:nowrap}
.hero .h1{margin:0;font:400 clamp(30px,4vw,44px)/1.18 var(--display);color:var(--ink)}
.hero .h1 .brand{color:var(--navy-deep)}
.rotator{display:inline-block;font-style:italic;color:var(--orange);min-width:1ch}
.rotator.swap{animation:swap .5s ease}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Section bands ---------- */
.band{background:var(--navy);color:#fff;text-align:center;padding-block:44px}
.band h1,.band h2{font:400 clamp(34px,4.6vw,50px)/1.1 var(--display)}
.band h1 em,.band h2 em{color:var(--orange)}
.section{padding-block:72px}
.lede{max-width:900px;margin:0 auto;text-align:center;font:400 clamp(18px,2vw,21px)/1.7 var(--display);color:var(--ink)}
.lede mark{background:none;color:var(--orange)}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.flip{perspective:1200px;min-width:0;cursor:pointer;outline:none}
.flip-inner{display:grid;height:100%;min-height:300px;transition:transform .7s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.face{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 24px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.front{background:var(--orange);color:#fff;gap:20px}
.front i{font-size:62px;line-height:1}
.front h3{font:600 20px/1.3 var(--display)}
.hint{position:absolute;right:14px;bottom:12px;opacity:.75}
.front .hint i{font-size:31px}
.back{background:#fff;color:var(--ink);border:2px solid #d5d8de;transform:rotateX(180deg);gap:16px}
.back-title{font:600 17px/1.3 var(--display);color:var(--navy-deep)}
.back ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font:400 14.5px/1.5 var(--display)}
.back .btn{color:var(--ink);border-color:var(--orange);padding:11px 18px}
.back .btn:hover{background:var(--orange);color:#fff}
.flip.flipped .flip-inner{transform:rotateX(180deg)}
.flip:focus-visible .flip-inner{outline:3px solid var(--navy-deep);outline-offset:3px}
@media (hover:hover){.flip:hover .flip-inner,.flip:focus-within .flip-inner{transform:rotateX(180deg)}}
.hint{display:none}
@media (hover:none){.hint{display:block}.front{position:relative}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 13px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 20px;border:2px solid currentColor;transition:.18s}

/* ---------- Market leaders ---------- */
.leaders{text-align:center}
.leaders h2{font:700 clamp(28px,4vw,46px)/1.15 var(--label);letter-spacing:.03em;text-transform:uppercase;color:var(--navy-deep)}
.leaders p{max-width:880px;margin:18px auto 0;font:400 19px/1.65 var(--display)}
.leaders p mark{background:none;color:var(--orange)}
.logos{margin:48px auto 0;width:100%;max-width:min(100%,1000px)}

/* ---------- Testimonials ---------- */
.testimonials{background:var(--navy);color:#fff;padding-block:64px}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.quote{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;min-width:0}
.stars{color:var(--orange);font-size:18px;letter-spacing:4px}
.quote blockquote{margin:0;font:italic 400 17px/1.7 var(--display)}
.quote cite{font-style:normal;font:600 15px/1.4 var(--label);letter-spacing:.06em;text-transform:uppercase;margin-top:auto}
.quote cite span{display:block;text-transform:none;letter-spacing:.02em;font-weight:400;opacity:.85;margin-top:4px}

/* ---------- Industries ---------- */
.industries{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:44px auto 72px;max-width:1140px}
.ind{position:relative;aspect-ratio:3/2;overflow:hidden;margin:0;max-width:100%;border-radius:4px}
.ind img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ind figcaption{position:absolute;inset:auto 0 0 0;padding:72px 22px 18px;background:linear-gradient(to top,rgba(18,36,72,.94) 0%,rgba(18,36,72,.72) 38%,rgba(18,36,72,0) 100%);color:#fff;font:400 clamp(22px,2.4vw,30px)/1.15 var(--display);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ind figcaption::after{content:"";display:block;width:36px;height:3px;margin-top:12px;background:var(--orange);transition:width .3s ease}
@media (hover:hover){
  .ind:hover img{transform:scale(1.06)}
  .ind:hover figcaption::after{width:72px}
}

/* ---------- Partners ---------- */
.partners-img{margin:48px auto 0;width:100%;max-width:min(100%,1100px)}

/* =========================================================
   Footer
   Markup: partials/footer.html.
   ========================================================= */
.footer{background:var(--navy-deep);color:#fff}
.footer a{text-decoration:none}
.footer a:hover{color:var(--orange)}
.footer p{margin:0}

/* Proposal strip */
.footer-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding-block:44px;border-bottom:1px solid rgba(255,255,255,.16)}
.footer-cta-title{font:400 clamp(26px,3vw,36px)/1.15 var(--display)}
.footer-cta p{margin-top:8px;font-size:16px;color:rgba(255,255,255,.8)}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.footer .footer-call{color:#fff;border-color:rgba(255,255,255,.6)}
.footer .footer-call:hover{background:#fff;border-color:#fff;color:var(--navy-deep)}
.footer .btn-orange:hover{color:#fff}

/* Columns */
.footer-grid{display:grid;grid-template-columns:1.35fr 1.1fr .8fr 1.1fr;gap:40px 48px;padding-block:52px 56px}
.footer-grid > *{min-width:0}
.footer-brand p{max-width:30ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}
.logo-f{display:inline-block;margin-bottom:18px}
.logo-f img{width:200px}
.footer-social{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font:600 13px/1 var(--label);letter-spacing:.08em;text-transform:uppercase}
.footer-social i{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.5);border-radius:50%;font-size:16px;transition:background .18s,border-color .18s}
.footer-social:hover i{background:var(--orange);border-color:var(--orange);color:#fff}
.footer-h{margin-bottom:18px;font:700 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer-col li,.footer-col address,.footer-emails{font-size:15px;line-height:1.5}
.footer-col li a,.footer-emails a{color:rgba(255,255,255,.88)}
.footer-col li a[aria-current="page"]{color:var(--orange)}
.footer-col address{font-style:normal;display:grid;gap:8px}
.footer-phone{font:700 18px/1.2 var(--label);letter-spacing:.04em}
.footer-emails{margin:20px 0 0;display:grid;gap:8px}
.footer-emails div{display:flex;flex-wrap:wrap;gap:0 10px}
.footer-emails dt{min-width:64px;color:rgba(255,255,255,.6)}
.footer-emails dd{margin:0;overflow-wrap:anywhere}

/* Legal bar */
.footer-bottom{background:rgba(0,0,0,.18);font-size:13.5px;color:rgba(255,255,255,.75)}
.footer-bottom .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;padding-block:18px}

@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;padding-block:44px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:44ch}
  .footer-col:last-child{grid-column:1/-1}
}
@media (max-width:560px){
  .footer-cta{padding-block:36px}
  .footer-cta-actions{width:100%}
  .footer-cta-actions .btn{flex:1 1 180px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .footer-bottom .wrap{flex-direction:column}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .services{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero{min-height:0;display:block;padding-top:52vw}
  .hero .wrap{padding:0}
  .hero-card{max-width:none;padding:32px var(--gutter-r) 36px var(--gutter)}
  .quotes{grid-template-columns:1fr;gap:48px}
  .industries{grid-template-columns:repeat(2,1fr);margin-bottom:56px}
  .ind:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:3/1}
}
@media (max-width:560px){
  body{font-size:16px}
  .section{padding-block:52px}
  .band{padding-block:34px}
  .services{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .industries{grid-template-columns:1fr;margin-bottom:44px}
  .ind:last-child:nth-child(odd){aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.flip-inner{transition:none!important}}

/* =========================================================
   Inner pages
   ========================================================= */
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--navy-deep);font-weight:600}

/* Service pages: story column + sidebar */
.story-head{text-align:center;font:700 clamp(26px,3.4vw,38px)/1.2 var(--body);color:var(--ink);margin-bottom:48px}
.story-head span{display:block}
.story{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:56px;align-items:start}
.solved{font:700 clamp(26px,3vw,34px)/1.2 var(--body);color:var(--orange);text-align:center;margin:36px 0 18px;letter-spacing:.02em}
.aside{display:grid;gap:0;position:sticky;top:120px}
.aside img{width:100%;aspect-ratio:4/3;object-fit:cover}
.aside-list{background:#7d7f84;color:#fff;list-style:none;margin:0;padding:26px 24px;display:grid;gap:12px;text-align:center;font-size:15.5px;line-height:1.45}
.aside-cta{background:var(--orange);color:#fff;text-align:center;padding:24px 20px;text-decoration:none;display:block;transition:background .18s}
.aside-cta:hover{background:var(--orange-dark)}
.aside-cta b{display:block;font:700 19px/1.25 var(--body);letter-spacing:.02em}
.aside-cta span{display:block;font:700 22px/1.3 var(--body);color:var(--navy-deep);margin-top:4px}

/* Our Difference */
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;margin-top:56px}
.diff-item{display:grid;grid-template-columns:60px minmax(0,1fr);gap:18px;align-items:start}
.diff-item i{font-size:40px;color:var(--navy-deep);text-align:center;padding-top:4px}
.diff-item h3{font:600 22px/1.2 var(--body);color:var(--orange);margin-bottom:6px}
.diff-item p{margin:0;font-size:16px;color:var(--muted)}
.section-title{text-align:center;font:700 clamp(26px,3.6vw,40px)/1.15 var(--label);letter-spacing:.03em;text-transform:uppercase;color:var(--navy-deep)}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:48px}
.split h3{font:700 clamp(24px,2.8vw,32px)/1.2 var(--body);color:var(--orange);margin-bottom:20px}
.split img{margin:0 auto;max-height:560px;width:auto}

/* Our Team */
.team{display:grid;grid-template-columns:1fr 1fr;gap:48px 56px;margin-top:56px}
.person{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
.person img{width:150px;aspect-ratio:1;object-fit:cover}
.person .role{font:italic 400 30px/1 var(--display);color:var(--orange)}
.person h3{font:600 15px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--navy-deep);margin:8px 0 12px}
.person p{margin:0;font-size:15.5px;color:var(--muted)}
.values{background:var(--mist);padding-block:64px}
.values-list{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.value{background:#fff;padding:26px 20px;text-align:center;border-top:4px solid var(--orange);min-width:0}
.value h3{font:700 14px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.value p{margin:0;font-size:15px;color:var(--muted);line-height:1.5}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:56px;margin-top:48px;align-items:start}
.contact-info{display:grid;gap:26px}
.contact-info h2{font:700 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.contact-info p{margin:0;font-size:17px}
.contact-info a{text-decoration:none;color:var(--navy-deep)}
.contact-info a:hover{color:var(--orange)}
.btn-solid{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);justify-self:start}
.contact-info .btn-solid{color:#fff}
.contact-info .btn-solid:hover{color:#fff}
.btn-solid:hover{background:var(--orange);border-color:var(--orange)}
.form{background:var(--mist);padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .note{grid-column:1/-1;font:700 13px/1 var(--label);letter-spacing:.12em;color:var(--navy-deep);margin:0 0 4px}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:600 13px/1 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.field input,.field textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #cfd4df;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
.field textarea{min-height:140px;resize:vertical}
.form button{grid-column:1/-1;justify-self:start;cursor:pointer;background:var(--orange);color:#fff;border-color:var(--orange)}
.form button:hover{background:var(--orange-dark);border-color:var(--orange-dark)}

/* Join Us */
.opp h3{font:italic 400 22px/1.35 var(--display);color:var(--navy-deep);margin:10px 0 18px}
.opp .btn{color:#fff;background:var(--orange);border-color:var(--orange);margin-top:8px}
.opp .btn:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.opp img{width:100%;max-height:none;aspect-ratio:4/3;object-fit:cover}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.benefit{border:1px solid var(--line);padding:28px 18px;text-align:center;display:grid;gap:14px;justify-items:center;min-width:0;transition:border-color .18s, transform .18s}
.benefit:hover{border-color:var(--orange);transform:translateY(-3px)}
.benefit i{font-size:34px;color:var(--orange)}
.benefit h3{font:600 15px/1.35 var(--label);letter-spacing:.05em;text-transform:uppercase;color:var(--navy-deep)}

@media (max-width:1080px){
  .values-list{grid-template-columns:repeat(3,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .story,.split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .aside{position:static;max-width:520px;margin:0 auto;width:100%}
  .team{grid-template-columns:1fr}
  .diff-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:560px){
  .story-head{margin-bottom:32px}
  .person{grid-template-columns:1fr;gap:16px}
  .person img{width:120px}
  .values-list{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;padding:24px 18px}
  .benefits{grid-template-columns:1fr 1fr;gap:14px}
}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================
   Font matching: sizes, weights and faces taken from the live site
   ========================================================= */
.band h1,.band h2{font:400 clamp(38px,5.4vw,64px)/1.1 var(--display)}
.lede{font:400 clamp(19px,2.3vw,28px)/1.55 var(--display);color:#222;max-width:1000px}
.btn{font:700 14.4px/1 var(--label)}
/* Flip boxes */
.front h3{font:400 19px/1.3 Georgia,"Times New Roman",serif}
.back ul{font:400 14px/1.5 var(--display)}
/* Market leaders + all big section titles */
.leaders h2,.section-title{font:800 clamp(30px,4.6vw,55px)/1.1 var(--body);letter-spacing:0;text-transform:uppercase;color:var(--navy-deep)}
.leaders p{font:400 clamp(19px,2.3vw,28px)/1.55 var(--display);color:#222;max-width:1000px}
/* Testimonials */
.quote blockquote{font:italic 400 clamp(17px,1.6vw,20px)/1.6 "Times New Roman",Times,serif}
.quote cite{font:700 clamp(17px,1.6vw,20px)/1.3 var(--label);letter-spacing:.02em}
.quote cite span{font-weight:400;font-size:16px}
/* Industry tiles */

/* Service pages */
.story-head{font:400 clamp(28px,3.8vw,48px)/1.2 var(--body)}
.story .prose p{font-weight:300;font-size:18px;line-height:1.7}
.story .prose strong{font-weight:700}
.solved{font:700 clamp(26px,2.8vw,32px)/1.2 var(--body);text-transform:uppercase}
.aside-list{font:300 17px/1.45 var(--body)}
.aside-cta b{font:700 clamp(21px,2.1vw,26px)/1.2 var(--body)}
.aside-cta span{font:800 clamp(22px,2.2vw,27px)/1.3 Arial,"Helvetica Neue",sans-serif}

/* Our Difference */
.diff-item h3{font:700 clamp(24px,2.4vw,28px)/1.2 var(--body)}
.diff-item p{font:300 15.5px/1.6 var(--body)}
.split h3{font:700 clamp(30px,3.6vw,44px)/1.15 var(--body)}
.split .prose p{font:300 17px/1.7 var(--body)}

/* Our Team */
.person .role{font:italic 400 clamp(36px,3.6vw,48px)/1 Georgia,"Times New Roman",serif}
.person h3{font:400 26px/1.2 var(--display);letter-spacing:0;text-transform:none;margin:6px 0 12px}
.person p{font:400 14.5px/1.65 var(--body)}
.value h3{font:700 clamp(18px,1.7vw,22px)/1.25 var(--body);letter-spacing:0}
.value p{font:400 17px/1.5 var(--display);color:var(--ink)}

/* Contact */
.lede.call{font:300 clamp(19px,2vw,24px)/1.5 var(--body);color:#020101}
.contact-info h2{font:700 clamp(20px,2vw,26px)/1.2 var(--body);letter-spacing:0;color:var(--orange)}
.contact-info p{font:300 17px/1.6 var(--body)}
.contact-info .btn{font-family:var(--body)}
.form .note{font:700 16px/1.2 var(--body);letter-spacing:0}
.field label{font:400 17px/1.2 var(--label);letter-spacing:0;text-transform:none}

/* Join Us */
.opp h3{font:700 clamp(20px,2vw,26px)/1.25 var(--label);font-style:normal;text-transform:uppercase;color:var(--navy-deep)}
.opp .prose p{font:400 clamp(17px,1.6vw,20px)/1.65 var(--body)}
.opp .btn{font-family:var(--body)}
.lede.sans{font:400 clamp(18px,1.6vw,20px)/1.6 var(--body)}
.benefit h3{font:300 19.2px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
@media (max-width:560px){.section-title{font-size:30px}.person h3{font-size:23px}}

/* =========================================================
   Gold text + second font pass (matched to /dev2019/)
   ========================================================= */
.band .plain{font-weight:400}
.hero .h1{font-size:clamp(30px,4vw,48px)}
.quote cite{font-weight:400}
.quote cite span{font:300 clamp(16px,1.6vw,20px)/1.3 var(--label)}
.story-head{font-weight:700}
.story .prose .w4{font-weight:400}
.aside-list{font-size:18px}
.diff-item h3.josefin{font-family:var(--label)}
.person p{font-size:14px}
.value h3{font-size:clamp(18px,1.9vw,26px)}
.value p{font:400 clamp(17px,1.5vw,20px)/1.5 var(--display)}
.form .note{color:var(--orange)}
.field label{font:300 20px/1.2 var(--label)}
.form button{font:400 17px/1 var(--body);text-transform:none;letter-spacing:0}
.opp h3{color:var(--orange)}
.diff-item p{font-size:15px}
.value h3{font-size:clamp(18px,2.05vw,26px)}
.value p{font-size:clamp(17px,1.6vw,20px)}
.person .role{font-size:clamp(36px,3.8vw,48px)}

/* Service pages: tighten gap between hero and the first headline */
.hero + .section{padding-top:32px}
@media (max-width:960px){.hero + .section{padding-top:8px}.hero + .section .story-head{margin-bottom:28px}}

/* =========================================================
   Service pages v2: layout and styling only (preview)
   ========================================================= */
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start}
.svc-main{min-width:0;display:grid;gap:36px}
.svc-main p{margin:0;font:400 17px/1.75 var(--body);color:var(--muted)}
.svc-main .w4{font-weight:700;color:var(--navy-deep);display:block;font-size:20px;margin-bottom:8px}
.svc-lead{border-left:4px solid var(--navy-deep);padding:4px 0 4px 24px}
.svc-main .svc-lead{font:400 clamp(19px,1.8vw,22px)/1.6 var(--display);color:var(--ink)}
.svc-solved{background:var(--mist);border-top:4px solid var(--orange);padding:32px 34px 34px}
.svc-solved .solved{text-align:left;margin:0 0 14px}
.commit{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.commit-card{border:1px solid var(--line);padding:28px 26px;background:#fff;transition:border-color .18s,box-shadow .18s}
.commit-card:hover{border-color:var(--orange);box-shadow:0 10px 26px rgba(32,72,136,.08)}
.commit-card i{font-size:28px;color:var(--orange);margin-bottom:16px;display:block}
.svc-main .svc-close{background:var(--navy-deep);color:#fff;padding:30px 34px;font:400 clamp(18px,1.7vw,21px)/1.6 var(--display)}
.svc-card{position:sticky;top:110px;border:1px solid var(--line);background:#fff;box-shadow:0 14px 36px rgba(32,72,136,.12)}
.svc-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.checks{list-style:none;margin:0;padding:26px 24px;display:grid;gap:14px}
.checks li{position:relative;padding-left:30px;font:400 16px/1.5 var(--body);color:var(--ink)}
.checks li::before{content:"\f00c";font:900 13px/1 "Font Awesome 6 Free";color:#fff;background:var(--orange);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;position:absolute;left:0;top:2px}
.svc-card .aside-cta{padding:22px 20px}
@media (max-width:960px){
  .svc-grid{grid-template-columns:1fr;gap:44px}
  .svc-card{position:static;max-width:520px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .commit{grid-template-columns:1fr}
  .svc-solved,.svc-main .svc-close{padding:24px 20px}
  .svc-lead{padding-left:18px}
}
.svc-grid{margin-top:8px}
.story-head::after{content:"";display:block;width:64px;height:3px;background:var(--orange);margin:22px auto 0}
.svc-main .commit-card p{font-size:16px;line-height:1.7}
.commit-card{border-top:4px solid var(--navy-deep)}
.svc-main .svc-close{border-left:6px solid var(--orange)}
.commit-3{grid-template-columns:1fr}
.commit-3 .commit-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;align-items:start}
.commit-3 .commit-card i{margin:4px 0 0}
.svc-solved p+p{margin-top:16px}
.svc-main .commit-card strong{display:block;font-size:20px;line-height:1.3;color:var(--navy-deep);margin-bottom:8px}

/* ---- "Want us to reach out?" card (ported from Di Lorenzo): slides up, never blocks the page ---- */
.lead-card{position:fixed;z-index:70;right:24px;bottom:24px;width:380px;max-width:calc(100vw - 24px);background:var(--navy-deep);color:#EEF2F8;border-radius:4px;border-top:4px solid var(--orange);padding:26px 24px 18px;box-shadow:0 24px 70px rgba(18,36,72,.38);transform:translateY(calc(100% + 40px));opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s;max-height:calc(100svh - 120px);overflow:auto;font-family:var(--body)}
.lead-card.in{transform:none;opacity:1}
.lead-card .lead-k{font:700 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 10px}
.lead-card h2{font:400 30px/1.1 var(--display);color:#fff;margin:0 0 10px}
.lead-card .lead-p{font-size:15px;line-height:1.55;color:#C9D3E6;margin:0 0 16px}
.lead-card .lead-p a{color:#fff}
.lead-card label{display:block;margin-bottom:10px}
.lead-card label span{display:block;font:600 12px/1.2 var(--label);letter-spacing:.06em;text-transform:uppercase;color:#AEBBD4;margin-bottom:5px}
.lead-card label em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.8}
.lead-card input{width:100%;font:400 16px/1.2 var(--body);color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);border-radius:3px;padding:11px 12px}
.lead-card input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.lead-card .lead-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lead-card .lead-go,.lead-card .lead-open{width:100%;margin-top:6px;background:var(--orange);color:#fff;border:0;border-radius:3px;padding:14px;font:700 14px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.lead-card .lead-go:hover,.lead-card .lead-open:hover{background:var(--orange-dark)}
.lead-card .lead-go:disabled{opacity:.6}
.lead-card .lead-err{min-height:0;margin:8px 0 0;font-size:14px;color:#FFC9C9}
.lead-card .lead-err:empty{display:none}
.lead-card .lead-fine{font-size:11.5px;line-height:1.45;color:#93A2BF;margin:12px 0 0}
.lead-card .lead-x{position:absolute;top:10px;right:12px;background:none;border:0;color:#AEBBD4;font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.lead-card .lead-no{display:block;margin:8px auto 0;background:none;border:0;color:#AEBBD4;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px}
.lead-card .lead-teaser{display:none;font-size:15px;line-height:1.5;color:#C9D3E6;margin:0 0 14px}
.lead-card .lead-open{display:none;margin-top:0}
.lead-card.compact .lead-teaser,.lead-card.compact .lead-open{display:block}
.lead-card.compact .lead-more{display:none}
.lead-card.compact{padding-bottom:10px}
.lead-card.compact h2{font-size:24px;margin-bottom:6px}
@media (max-width:860px){.lead-card{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom));padding:22px 18px 14px}.lead-card h2{font-size:26px}}
@media (prefers-reduced-motion:reduce){.lead-card{transition:opacity .2s}}

/* Contact Us form: error and thank-you messages */
.form .form-err{grid-column:1/-1;margin:0;color:#B3261E;font-size:15px}
.form .form-err:empty{display:none}
.form .form-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-done{grid-column:1/-1}
.form-done p:last-child{font:300 18px/1.6 var(--body);margin:0}
.form-done a{color:var(--navy-deep)}

/* Privacy Policy page */
.policy{max-width:760px;margin:0 auto}
.policy h2{font:700 clamp(20px,2vw,24px)/1.25 var(--body);color:var(--navy-deep);margin:36px 0 10px}
.policy p{font:300 17px/1.7 var(--body);margin:0 0 14px}
.policy a{color:var(--navy-deep)}
.policy-date{color:var(--muted);font-size:15px!important}


/* Our Partners: Connecteam replaces SafetySkills (last logo, top row) in the combined partners image.
   Positions are percentages of the image, so it lines up at every screen size. */
.partners-wrap{position:relative;margin:48px auto 0;max-width:min(100%,1100px)}
.partners-wrap .partners-img{margin:0;max-width:100%;display:block}
.partner-swap{position:absolute;left:85.2%;top:7.5%;width:13.6%;height:37%;background:var(--paper);display:flex;align-items:center;justify-content:center}
.partner-swap img{width:92%;height:auto;max-width:none}

/* =========================================================
   Our Team v2: cleaner cards (preview)
   ========================================================= */
.team{gap:28px;margin-top:56px}
.person{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 20px;align-items:end;background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy-deep);padding:30px 30px 32px;transition:box-shadow .18s,border-color .18s}
.person:hover{box-shadow:0 12px 30px rgba(32,72,136,.10)}
.person>div{display:contents}
.person img{grid-row:1/3;grid-column:1;width:88px;height:88px;border-radius:50%;object-fit:cover;align-self:center;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--orange)}
.person .role{grid-column:2;grid-row:1;font:700 12.5px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-style:normal}
.person h3{grid-column:2;grid-row:2;align-self:start;font:400 27px/1.2 var(--display);color:var(--navy-deep);margin:8px 0 0;letter-spacing:0;text-transform:none}
.person p{grid-column:1/-1;grid-row:3;align-self:start;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);font:400 15.5px/1.75 var(--body);color:var(--muted)}
.values .section-title{font-size:clamp(28px,3.4vw,42px)}
.values-list{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:44px}
.value{flex:1 1 190px;max-width:224px;display:flex;flex-direction:column;align-items:center;padding:30px 20px 28px;border-top:3px solid var(--orange);box-shadow:0 6px 18px rgba(32,72,136,.06)}
.value i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(242,154,46,.12);color:var(--orange);font-size:21px;margin-bottom:16px}
.value h3{font:700 14px/1.35 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-deep);margin-bottom:10px}
.value p{font:400 15px/1.6 var(--body);color:var(--muted)}
@media (max-width:1080px){.value{max-width:none}}
@media (max-width:560px){
  .person{grid-template-columns:72px minmax(0,1fr);padding:24px 20px 26px}
  .person img{width:72px;height:72px}
  .person h3{font-size:23px}
  .value{flex-basis:100%}
}

/* =========================================================
   Our Difference v2 (preview)
   ========================================================= */
.diff-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.diff-item{display:flex;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy-deep);padding:30px 28px 32px;transition:box-shadow .18s,transform .18s}
.diff-item:hover{box-shadow:0 12px 30px rgba(32,72,136,.10);transform:translateY(-2px)}
.diff-item i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:rgba(242,154,46,.12);color:var(--orange);font-size:22px;padding:0;margin-bottom:18px}
.diff-item h3{font:700 22px/1.2 var(--body);color:var(--navy-deep);margin-bottom:8px}
.diff-item p{font:400 15.5px/1.7 var(--body);color:var(--muted)}
.diff-item h3.josefin{font-family:var(--body)}
.oversight{background:var(--mist)}
.oversight .section-title{font-size:clamp(28px,3.4vw,42px)}
.oversight .section-title::after{content:"";display:block;width:64px;height:3px;background:var(--orange);margin:20px auto 0}
.oversight .lede{font-size:clamp(18px,1.8vw,22px);margin-left:auto;margin-right:auto}
.oversight .split{background:#fff;border:1px solid var(--line);box-shadow:0 14px 36px rgba(32,72,136,.08);padding:44px 48px;gap:48px;margin-top:44px}
.oversight .split h3{font-size:clamp(26px,2.8vw,34px);border-left:4px solid var(--orange);padding-left:18px}
.oversight .split .prose p{color:var(--muted)}
.oversight .split img{max-height:480px;border-radius:6px}
@media (max-width:1080px){.diff-grid{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.diff-grid{grid-template-columns:1fr 1fr;gap:20px}.oversight .split{padding:32px 28px}}
@media (max-width:640px){.diff-grid{grid-template-columns:1fr}.oversight .split{padding:26px 20px}}

/* Join Us: current openings */
.openings .section-title::after{content:"";display:block;width:64px;height:3px;background:var(--orange);margin:20px auto 0}
.job-list{display:grid;gap:14px;max-width:960px;margin:40px auto 0}
.job{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy-deep);padding:22px 26px;transition:border-color .18s,box-shadow .18s}
.job:hover{border-left-color:var(--orange);box-shadow:0 10px 26px rgba(32,72,136,.08)}
.job-body{min-width:0}
.job h3{font:700 18px/1.35 var(--body);color:var(--navy-deep);margin:0 0 8px}
.job-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;font:400 15px/1.4 var(--body);color:var(--muted)}
.job-meta i{color:var(--orange);margin-right:7px}
.job .btn{flex:none;min-width:120px}
.job-status{text-align:center;color:var(--muted);margin:0}
.job-all{text-align:center;margin:28px 0 0}
@media (max-width:640px){.job{flex-direction:column;align-items:stretch;padding:20px}.job .btn{width:100%}}
.btn-orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn-line{color:var(--navy-deep);border-color:var(--navy-deep)}
.btn-line:hover{background:var(--navy-deep);color:#fff}

/* Service pages: navy bar under the hero photo (twice the 4px bar beside the intro paragraph) */
.hero:has(+ .section .svc-grid){border-bottom:8px solid var(--navy-deep)}

/* Intro paragraphs: even out line lengths so no single word sits alone on the last line */
.lede{text-wrap:balance}

/* Join Us: Opportunities heading lines up with the top of the photo, with room below the intro paragraph */
.split.opp{align-items:start;margin-top:72px}
.split.opp .section-title{margin-top:0;line-height:1}
@media (max-width:960px){.split.opp{margin-top:48px}}
/* Join Us Opportunities text: same light 18px body text as the service pages */
.split.opp .prose p{font:300 18px/1.7 var(--body)}

/* Our Team: larger headshots (88px -> 110px desktop, 72px -> 88px phones) */
.person{grid-template-columns:110px minmax(0,1fr)}
.person img{width:110px;height:110px}
@media (max-width:560px){.person{grid-template-columns:88px minmax(0,1fr)}.person img{width:88px;height:88px}}

/* Testimonial stars: 3x larger */
.stars{font-size:54px;letter-spacing:6px;line-height:1}
.oversight .split .prose p{padding-left:22px}
.oversight .split{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center}
.oversight .split img.dash-shot{max-height:none;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 10px 28px rgba(32,72,136,.12)}
@media (max-width:960px){.oversight .split{grid-template-columns:1fr}}
.oversight .split{grid-template-columns:350px minmax(0,1fr);gap:40px;padding:44px 40px}
@media (max-width:960px){.oversight .split{grid-template-columns:1fr;padding:32px 28px}}
@media (max-width:640px){.oversight .split{padding:26px 20px}}

@media (max-width:560px){.hero-brand-line{white-space:normal}}

/* Final hero refinements. */
.hero .h1{font-weight:500;letter-spacing:-.025em}

/* Desktop hero card: its left edge sits --hero-card-reach in from the right edge of the
   page's content column (or of the viewport, when that is narrower), and the white box
   runs flush to the right edge of the viewport.
   Deliberately independent of the header, so the menu can change without moving it. */
@media (min-width:961px){
  .hero{--hero-card-reach:585px}
  .hero .wrap{max-width:none;padding:0;display:block}
  .hero-card{
    max-width:none;width:auto;padding-right:24px;
    margin-left:min(calc(50% + 590px - var(--hero-card-reach)), calc(100% - var(--hero-card-reach)));
  }
}

@media (min-width:961px) and (max-width:1100px){.hero{--hero-card-reach:471px}}
@media (min-width:961px) and (max-width:1100px){
  .hero-card{padding:36px 20px 40px 36px}
  .hero .h1{font-size:37px}
}

/* Mobile/tablet hero photos: show the whole photo instead of a cropped strip.
   Photo shape defaults to 3:2; a page with a different shape sets --hero-ar inline. */
@media (max-width:960px){
  .hero{padding-top:calc(100% / var(--hero-ar,1.5));background-size:100% auto;background-position:center top;background-repeat:no-repeat;background-color:#fff}
}