/* The products showcase (/products/ and the home page strip). Each tile wears its product's own
   colours and heading font, read from that product's site. Scoped under .pr. */
.pr{background:#fff;color:#1a1836;font:400 16.5px/1.6 'Inter',system-ui,sans-serif;overflow:hidden}
.pr .w{max-width:1240px;margin:0 auto;padding:0 24px}
.pr img{max-width:100%;height:auto;display:block}
.pr .top{padding:72px 0 40px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
.pr .top h1,.pr .top h2{font:800 clamp(2.4rem,4.8vw,4rem)/1.04 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;margin:0}
.pr .top p{margin:0;color:#4d4a68;font-size:1.08rem}

/* the tiles: two to a row, all the same size and shape, each in its product's own colours */
.pr .bento{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding-bottom:28px}
.pr .t{position:relative;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;padding:38px 40px 0;min-height:560px;transition:transform .2s,box-shadow .2s}
.pr .t:hover{transform:translateY(-3px);box-shadow:0 26px 50px -24px rgba(23,21,50,.35)}
.pr .t h3{margin:0 0 12px;letter-spacing:-.02em;line-height:1.08;font-size:2.1rem}
.pr .t p{margin:0 0 16px;font-size:15.5px;min-height:4.9em}
.pr .t .go{font:700 14px/1 'Inter';margin-bottom:28px}
.pr .t .pic{margin:auto 0 0;position:relative;height:250px;overflow:hidden;border-radius:12px 12px 0 0;
  box-shadow:0 -10px 40px -18px rgba(0,0,0,.28)}
.pr .t .pic img{width:100%;height:100%;object-fit:cover;object-position:top left}
.pr .t .logo{height:30px;width:auto;margin-bottom:14px;align-self:flex-start}

.pr .acc{background:#eef5f1;color:#011b46}
.pr .acc h3{font-family:'Nunito',sans-serif;font-weight:900;color:#011b46}
.pr .acc .go{color:#03684e}
.pr .acc .pic{overflow:visible;box-shadow:none}
.pr .acc .pic img:first-child{border-radius:12px 12px 0 0;box-shadow:0 -10px 40px -18px rgba(0,0,0,.28)}
.pr .acc .pic .phone{position:absolute;right:18px;bottom:-30px;width:24%;height:auto;border-radius:16px;border:5px solid #011b46}

.pr .oe{background:#fff7eb;color:#1c1917}
.pr .oe h3{font-family:'Manrope',sans-serif;font-weight:800;color:#1c1917}
.pr .oe .go{color:#b45309}

.pr .pp{background:#e3f1ef;color:#101f1b}
.pr .pp h3{font-family:'Archivo',sans-serif;font-weight:700;color:#101f1b}
.pr .pp .go{color:#0f766e}

.pr .ae{background:#f4f3f7;color:#171532}
.pr .ae h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#171532}
.pr .ae .go{color:#c2410c}

.pr .aos{background:#eef7f5;color:#101f1b}
.pr .aos h3{font-family:'Archivo',sans-serif;font-weight:700}
.pr .aos .go{color:#0f766e}

.pr .idv{background:#f4f4f2;color:#101f1b}
.pr .idv h3{font-family:'Archivo',sans-serif;font-weight:700;color:#101f1b}
.pr .idv .go{color:#0f766e}

/* how they fit: one line through a firm's year */
.pr .fit{padding:70px 0 90px}
.pr .fit h2{font:800 clamp(1.8rem,3vw,2.6rem)/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;margin:0 0 36px}
.pr .track{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.pr .track:before{content:"";position:absolute;left:10%;right:10%;top:15px;height:2px;background:#e7e5ee}
.pr .stop{text-align:center;padding:0 14px;position:relative}
.pr .stop i{display:block;width:32px;height:32px;border-radius:50%;margin:0 auto 18px;border:6px solid #fff;box-shadow:0 0 0 2px #e7e5ee}
.pr .stop b{display:block;font:700 12px/1.2 'Inter';letter-spacing:.08em;text-transform:uppercase;color:#75728f;margin-bottom:8px}
.pr .stop a{font:700 1.05rem/1.3 'Inter';color:#1a1836;text-decoration:none}
.pr .stop a:hover{text-decoration:underline}
.pr .stop p{margin:8px 0 0;font-size:14.5px;color:#4d4a68}

@media (max-width:980px){
  .pr .top{grid-template-columns:1fr;gap:16px;padding-top:48px}
  .pr .bento{grid-template-columns:1fr}
  .pr .t{padding:30px 28px 0;min-height:0}
  .pr .t p{min-height:0}
  .pr .t .pic{height:200px}
  .pr .track{grid-template-columns:1fr;gap:26px}
  .pr .track:before{display:none}
  .pr .stop{text-align:left;padding:0 0 0 52px}
  .pr .stop i{position:absolute;left:0;top:0;margin:0}
}
