/* ==========================================================================
   Research products: the listing page (products.html) and one page per
   product (body.pd-page). Loaded after styles.css, which provides the
   colours, header, footer and fonts.
   ========================================================================== */

/* ---------- Listing ---------- */
.rp-top{padding:140px 0 0;background:#fff}
.rp-title{margin:0 0 14px;font-size:clamp(26px,2.8vw,38px);letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--navy)}
.rp-title-bar{width:56px;height:3px;background:var(--green);margin:0 0 24px}
.rp-lede{margin:0 0 8px;font-family:'Source Serif 4',Georgia,serif;font-size:17.5px;line-height:1.85;color:#2c3b46}
.rp-section{padding:56px 0 110px;background:#fff}
.rp-list{display:grid;gap:36px}
.rp-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);box-shadow:0 14px 36px rgba(10,36,56,.07);transition:box-shadow .25s,transform .25s}
.rp-item:hover{box-shadow:0 24px 54px rgba(10,36,56,.13);transform:translateY(-3px)}
.rp-item:nth-child(even) .rp-media{order:2}
.rp-media{position:relative;display:block;min-height:380px;overflow:hidden;background:#fff}
.rp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.rp-media.contain{background:#fff;border-right:1px solid var(--line)}
.rp-item:nth-child(even) .rp-media.contain{border-right:0;border-left:1px solid var(--line)}
.rp-media.contain img{object-fit:contain;padding:48px 28px 28px}
.rp-item:hover .rp-media img{transform:scale(1.035)}
.rp-type{position:absolute;left:0;top:0;z-index:1;padding:11px 16px;background:rgba(7,30,49,.92);color:#fff;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.rp-body{display:flex;flex-direction:column;padding:42px 46px}
.rp-num{margin:0 0 12px;font:600 13px 'Source Serif 4',Georgia,serif;letter-spacing:.14em;color:var(--green)}
.rp-body h2{margin:0 0 10px;font:600 clamp(23px,2.2vw,29px)/1.25 'Source Serif 4',Georgia,serif;letter-spacing:0;color:var(--navy)}
.rp-body h2 a{transition:color .2s}
.rp-body h2 a:hover{color:var(--green2)}
.rp-sub{margin:0 0 18px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.rp-desc{margin:0 0 22px;font-family:'Source Serif 4',Georgia,serif;font-size:15.5px;line-height:1.78;color:#33434c}
.rp-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.rp-facts li{padding:7px 11px;background:var(--tint);border:1px solid var(--line);font-size:11.5px;color:#41525d}
.rp-facts b{color:var(--navy);font-weight:700}
.rp-actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.rp-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;background:var(--green);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:background .2s}
.rp-btn:hover{background:var(--green2)}
.rp-btn svg,.rp-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.rp-link{display:inline-flex;align-items:center;gap:8px;color:var(--green2);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:color .2s}
.rp-link:hover{color:var(--navy)}
.rp-cta{margin-top:56px;padding:36px 42px;background:linear-gradient(165deg,var(--navy) 0%,#123a56 100%);display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.rp-cta p{margin:0;max-width:660px;font-family:'Source Serif 4',Georgia,serif;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.86)}
.rp-cta a{flex:none;padding:13px 24px;border:1px solid rgba(255,255,255,.55);color:#fff;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:.2s}
.rp-cta a:hover{background:#fff;color:var(--navy)}
.rp-license{margin-top:26px;padding:24px 32px;border:1px dashed #b9c8c0;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rp-license b{flex:none;font:700 15px 'Source Serif 4',Georgia,serif;color:var(--navy)}
.rp-license p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.rp-license a{color:var(--green2);font-weight:600}

@media(max-width:1020px){
  .rp-item{grid-template-columns:1fr}
  .rp-item:nth-child(even) .rp-media{order:0}
  .rp-media{min-height:0;aspect-ratio:16/9}
  .rp-media.contain,.rp-item:nth-child(even) .rp-media.contain{border:0;border-bottom:1px solid var(--line)}
}
@media(max-width:900px){.rp-top{padding-top:118px}}
@media(max-width:620px){
  .rp-top{padding-top:104px}
  .rp-section{padding:40px 0 80px}
  .rp-body{padding:28px 24px 30px}
  .rp-media.contain img{padding:40px 14px 14px}
  .rp-cta{padding:28px 24px}
}

/* ---------- Product page: banner ---------- */
.pd-hero{position:relative;display:flex;align-items:flex-end;min-height:600px;padding:180px 0 130px;background:var(--navy2);color:#fff;overflow:hidden}
.pd-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,23,37,.4) 0%,rgba(5,23,37,.3) 35%,rgba(5,23,37,.12) 60%,rgba(5,23,37,0) 80%),linear-gradient(0deg,rgba(5,23,37,.3) 0%,transparent 35%)}
.pd-hero .container{position:relative;z-index:2}
.pd-crumb{margin:0 0 20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#a8d6c3}
.pd-crumb a{color:#fff;opacity:.82;transition:opacity .2s}
.pd-crumb a:hover{opacity:1}
.pd-hero h1{margin:0 0 18px;font:600 clamp(34px,4.6vw,60px)/1.08 'Source Serif 4',Georgia,serif;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.pd-sub{margin:0;max-width:720px;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:rgba(255,255,255,.86)}
.pd-hero h1{text-shadow:0 1px 3px rgba(5,23,37,.6),0 2px 20px rgba(5,23,37,.75)}
.pd-hero .pd-crumb,.pd-hero .pd-sub{color:#fff;text-shadow:0 1px 2px rgba(5,23,37,.9),0 0 10px rgba(5,23,37,.8),0 0 24px rgba(5,23,37,.6)}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pd-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--green);background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.pd-btn:hover{background:var(--green2);border-color:var(--green2)}
.pd-btn.ghost{background:transparent;border-color:rgba(255,255,255,.6)}
.pd-hero .pd-btn.ghost{background:rgba(5,23,37,.45)}
.pd-btn.ghost:hover{background:#fff;border-color:#fff;color:var(--navy)}
.pd-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

/* key figures, overlapping the banner */
.pd-stats{position:relative;z-index:3;margin-top:-66px}
.pd-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-top:3px solid var(--green);box-shadow:0 22px 50px rgba(10,36,56,.14)}
.pd-stats .pd-stats-grid,.pd-stats .pd-stats-grid.adm-edit{background:#fff}   /* stays opaque in the editor too: it overlaps the dark banner */
.pd-stat{padding:26px 28px;border-right:1px solid var(--line)}
.pd-stat:last-child{border-right:0}
.pd-stat strong{display:block;font:600 clamp(26px,2.4vw,34px)/1 'Source Serif 4',Georgia,serif;color:var(--navy)}
.pd-stat span{display:block;margin-top:10px;font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}

/* in-page menu */
.pd-tabs{position:sticky;top:96px;z-index:40;margin-top:48px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.pd-tabs .container{display:flex;gap:34px;overflow-x:auto;scrollbar-width:none}
.pd-tabs .container::-webkit-scrollbar{display:none}
.pd-tabs a{flex:none;padding:17px 0 15px;border-bottom:2px solid transparent;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#4a5a65;transition:color .2s,border-color .2s}
.pd-tabs a:hover,.pd-tabs a.on{color:var(--navy);border-bottom-color:var(--green)}

/* ---------- Product page: sections ---------- */
.pd-section{padding:88px 0;background:#fff;scroll-margin-top:150px}
.pd-section.tint{background:var(--tint)}
.pd-h2{margin:0 0 14px;font:600 clamp(21px,2.1vw,27px)/1.25 'Archivo',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--navy)}
.pd-bar{width:56px;height:3px;background:var(--green);margin:0 0 34px}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:start}
.pd-text p{margin:0 0 20px;font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.85;color:#2c3b46}
.pd-text p:last-child{margin-bottom:0}
.pd-text a{color:var(--green2);font-weight:600}
.pd-text a:hover{color:var(--navy)}
.pd-text ul{margin:0 0 20px;padding-left:20px;font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.8;color:#2c3b46}
.pd-text li{margin-bottom:6px}
.pd-aside{padding:30px 32px;background:var(--tint);border-left:3px solid var(--green)}
.pd-section.tint .pd-aside{background:#fff}
@media(min-width:1021px){.pd-aside{position:sticky;top:180px}}
.pd-aside h3{margin:0 0 12px;font:700 10.5px 'Archivo',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--green2)}
.pd-aside dl{margin:0}
.pd-aside dl>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid #dfe7e3;font-size:13.5px;line-height:1.55}
.pd-aside dl>div:last-child{border-bottom:0}
.pd-aside dt{font-weight:700;color:var(--navy)}
.pd-aside dd{margin:0;color:#41525d}

/* feature cards */
.pd-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px}
.pd-feature{padding:30px 30px 32px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--green);box-shadow:0 10px 28px rgba(10,36,56,.06)}
.pd-feature b{display:block;margin-bottom:12px;font:600 13px 'Source Serif 4',Georgia,serif;letter-spacing:.14em;color:var(--green)}
.pd-feature h3{margin:0 0 10px;font:600 20px/1.3 'Source Serif 4',Georgia,serif;color:var(--navy)}
.pd-feature p{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.75;color:#41525d}

/* embedded application */
.pd-app{padding:80px 0 88px;background:var(--navy2);color:#fff;scroll-margin-top:150px}
.pd-app .pd-h2{color:#fff}
.pd-app-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:30px}
.pd-app-head p{margin:0;max-width:660px;font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.75;color:rgba(255,255,255,.76)}
.pd-frame{position:relative;height:min(80vh,780px);min-height:520px;background:#0d2438;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.pd-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pd-frame-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.pd-frame-note a{color:#a8d6c3;font-weight:600}

/* legend of classes */
.pd-classes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pd-classes li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--navy)}
.pd-classes i{flex:none;width:22px;height:22px;background:var(--c);border:1px solid rgba(11,45,72,.18)}

/* figures */
.pd-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pd-gallery.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pd-gallery.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pd-gallery figure{margin:0;background:#fff;border:1px solid var(--line)}
.pd-gallery img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#fff}
.pd-gallery figure.contain img{object-fit:contain;padding:12px}
.pd-gallery figure.wide img{aspect-ratio:auto}
.pd-gallery figcaption{padding:14px 16px 16px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.55;color:var(--muted)}
.pd-gallery figcaption b{display:block;margin-bottom:3px;font-size:13px;color:var(--navy)}
.pd-credit{margin:14px 0 0;font-size:12px;color:#56636b}
.pd-credit a{color:var(--green2);font-weight:600}

/* what is in the dataset */
.pd-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0 0 34px;padding:0;list-style:none;border-top:1px solid var(--line)}
.pd-files li{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6;color:#33434c}
.pd-files b{display:block;font-size:14.5px;color:var(--navy)}
.pd-files span{font-size:13px;color:var(--muted)}

/* accuracy table */
.pd-table-wrap{overflow-x:auto;margin:0 0 34px}
.pd-table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.pd-table caption{padding:0 0 12px;text-align:left;font:700 10.5px 'Archivo',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--green2)}
.pd-table th,.pd-table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.pd-table thead th{background:var(--tint);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#56636b}
.pd-table tbody th{font-weight:700;color:var(--navy)}
.pd-table td{color:#33434c;font-variant-numeric:tabular-nums}
@media (max-width:620px){.pd-table{min-width:0}.pd-table th,.pd-table td{padding:11px 10px}}   /* on phones the three columns fit, so the caption wraps instead of being cut off */
@media (max-width:400px){.pd-table th,.pd-table td{padding:10px 6px}.pd-table thead th{font-size:9.5px;letter-spacing:.04em}}

/* citation */
.pd-cite{padding:28px 32px 26px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--green)}
.pd-cite p{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.8;color:#2c3b46}
.pd-cite a{color:var(--green2);font-weight:600;word-break:break-word}
.pd-copy{margin-top:16px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);background:var(--tint);color:var(--green2);font:700 10px 'Archivo',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.2s}
.pd-copy:hover{background:var(--green);border-color:var(--green);color:#fff}
.pd-note{margin:18px 0 0;font-size:13.5px;line-height:1.7;color:#56636b}
.pd-note a{color:var(--green2);font-weight:600}

/* contact */
.pd-contact{padding:90px 0;background:linear-gradient(165deg,var(--navy) 0%,#123a56 100%);color:#fff;scroll-margin-top:150px}
.pd-contact .pd-h2{color:#fff}
.pd-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pd-contact-intro p{margin:0 0 18px;font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.8;color:rgba(255,255,255,.84)}
.pd-contact-intro p:last-child{margin-bottom:0}
.pd-contact-intro a{color:#a8d6c3;font-weight:600}
.pd-contact-card{padding:34px 36px;background:#fff;color:var(--ink);border-top:3px solid var(--green);box-shadow:0 30px 70px rgba(0,0,0,.28)}
.pd-contact-card h3{margin:0 0 4px;font:700 24px/1.2 'Source Serif 4',Georgia,serif;color:var(--navy)}
.pd-contact-card .sub{margin:0 0 20px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.pd-contact-card dl{margin:0 0 26px}
.pd-contact-card dl>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid #eef2f0;font-size:14px;line-height:1.55}
.pd-contact-card dl>div:last-child{border-bottom:0}
.pd-contact-card dt{padding-top:3px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--green2)}
.pd-contact-card dd{margin:0;color:#33434c}
.pd-contact-card dd a{color:var(--navy);font-weight:600;transition:color .2s}
.pd-contact-card dd a:hover{color:var(--green2)}
.pd-contact-card .pd-btn{width:100%;justify-content:center}

/* previous / next product */
.pd-pager{padding:44px 0 72px;background:#fff;border-top:1px solid var(--line)}
.pd-pager .container{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pd-pager a{display:inline-flex;flex-direction:column;gap:6px;max-width:48%}
.pd-pager small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--green2)}
.pd-pager span{font:600 18px/1.35 'Source Serif 4',Georgia,serif;color:var(--navy);transition:color .2s}
.pd-pager a:hover span{color:var(--green2)}
.pd-pager a.next{margin-left:auto;text-align:right}

@media(max-width:1120px){.pd-classes{grid-template-columns:repeat(3,minmax(0,1fr))}.pd-gallery.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1020px){
  .pd-grid,.pd-contact-grid{grid-template-columns:1fr;gap:44px}
  .pd-features{grid-template-columns:1fr}
  .pd-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-stat:nth-child(2){border-right:0}
  .pd-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pd-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .pd-tabs{top:76px}
  .pd-hero{min-height:540px;padding:150px 0 120px}
}
@media(max-width:620px){
  .pd-hero{min-height:0;padding:128px 0 108px}
  .pd-hero:after{background:linear-gradient(0deg,rgba(5,23,37,.5) 0%,rgba(5,23,37,.38) 50%,rgba(5,23,37,.25) 100%)}
  .pd-section,.pd-contact{padding:64px 0}
  .pd-app{padding:60px 0}
  .pd-frame{height:72vh;min-height:460px}
  .pd-tabs .container{gap:24px}
  .pd-stat{padding:20px 18px}
  .pd-files,.pd-gallery,.pd-gallery.two,.pd-gallery.four{grid-template-columns:1fr}
  .pd-classes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-aside{padding:24px 22px}
  .pd-aside dl>div{grid-template-columns:1fr;gap:2px}
  .pd-contact-card{padding:28px 22px}
  .pd-cite{padding:22px 20px}
  .pd-pager a{max-width:100%}
  .pd-pager a.next{margin-left:0;text-align:left}
}

/* Scroll reveal (styles.css): cards and photos come in one after another and lift under the mouse */
.rp-item.rssem-reveal{transition:opacity .8s ease,transform .8s ease,box-shadow .25s}
.rp-item.rssem-reveal.in:hover{transition:box-shadow .25s,transform .25s}
.pd-stat{position:relative}
.pd-stat:after{content:'';position:absolute;left:28px;bottom:0;width:0;height:2px;background:var(--green);transition:width .35s ease}
.pd-stat:hover:after{width:44px}
.pd-stat.rssem-reveal.in:nth-child(2){transition-delay:.08s}
.pd-stat.rssem-reveal.in:nth-child(3){transition-delay:.16s}
.pd-stat.rssem-reveal.in:nth-child(4){transition-delay:.24s}
.pd-feature{transition:transform .3s ease,box-shadow .3s ease}
.pd-feature:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(10,36,56,.13)}
.pd-feature.rssem-reveal{transition:opacity .8s ease,transform .8s ease,box-shadow .3s ease}
.pd-feature.rssem-reveal.in:nth-child(2){transition-delay:.1s}
.pd-feature.rssem-reveal.in:nth-child(3){transition-delay:.2s}
.pd-feature.rssem-reveal.in:hover{transition:transform .3s ease,box-shadow .3s ease}
.pd-gallery figure{overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.pd-gallery figure:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(10,36,56,.12)}
.pd-gallery img{transition:transform .7s ease}
.pd-gallery figure:hover img{transform:scale(1.04)}
.pd-gallery figcaption{position:relative;background:#fff}
.pd-gallery figure.rssem-reveal{transition:opacity .8s ease,transform .8s ease,box-shadow .3s ease}
.pd-gallery figure.rssem-reveal.in:nth-child(2){transition-delay:.08s}
.pd-gallery figure.rssem-reveal.in:nth-child(3){transition-delay:.16s}
.pd-gallery figure.rssem-reveal.in:nth-child(4){transition-delay:.24s}
.pd-gallery figure.rssem-reveal.in:hover{transition:transform .3s ease,box-shadow .3s ease}
.pd-contact-card.rssem-reveal.in{transition-delay:.12s}
@media (prefers-reduced-motion:reduce){.pd-gallery img,.pd-gallery figure:hover img{transition:none;transform:none}}