/* Responsive layer for the Olalekan & Akinsola LP site.
 *
 * Every page is authored with inline styles, so these rules must out-rank a
 * style attribute and therefore use !important.
 *
 * IMPORTANT: the selectors match the *rendered* style attribute, not the
 * source. The dc/React runtime re-serialises inline styles through the CSSOM,
 * which adds a space after each colon, expands `0` to `0px` and spaces out
 * function arguments. So the source `padding:0 56px` reaches the browser as
 * `padding: 0px 56px`, and that is the form matched below. Verified against a
 * headless-Chrome DOM dump of every page.
 *
 * Substring matching means a 2-value rule such as `padding: 44px 56px` also
 * matches `padding: 44px 56px 28px`. Rules are therefore ordered general
 * first, specific second, so the specific one wins on source order.
 *
 * Breakpoints: 1024px tablet, 760px mobile, 480px small phone.
 */

/* ---------------------------------------------------------------- global - */

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

h1, h2, h3, p, a { overflow-wrap: break-word; }

/* ------------------------------------------------------- hover contrast - */
/* Each page's own stylesheet sets a blanket `a:hover { color:#1e3fd0 }`. On a
 * navy pill or a dark footer that turns dark-blue-on-dark, so the states below
 * override it per CTA shape. Selectors carry the rendered colour form
 * (`rgb(255, 255, 255)`), which is what React writes to the DOM. */

/* Every link and button eases between states, so no hover snaps. */
a, button {
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, opacity .18s ease, transform .18s ease;
}

/* Solid white pill, sitting on navy -> invert, with a ring so the shape holds. */
a[style*="border-radius: 999px"][style*="background: rgb(255, 255, 255)"]:hover,
button[style*="border-radius: 999px"][style*="background: rgb(255, 255, 255)"]:hover {
  background: #0a1a6e !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9) !important;
}

/* Navy gradient pill -> deepen and lift, text stays white.
   Swapping a gradient for a flat colour cannot animate: browsers do not
   interpolate background-image, so the old rule snapped. Darkening with a
   filter and lifting with a transform are both animatable, so this eases. */
a[style*="border-radius: 999px"][style*="linear-gradient"],
button[style*="border-radius: 999px"][style*="linear-gradient"],
.oa-nav-cta {
  transition: filter .22s ease, transform .22s ease, box-shadow .22s ease !important;
  will-change: filter, transform;
}
a[style*="border-radius: 999px"][style*="linear-gradient"]:hover,
button[style*="border-radius: 999px"][style*="linear-gradient"]:hover,
.oa-nav-cta:hover {
  filter: brightness(.78) saturate(1.15);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(5, 11, 46, .38);
  color: #ffffff !important;
}
a[style*="border-radius: 999px"][style*="linear-gradient"]:active,
button[style*="border-radius: 999px"][style*="linear-gradient"]:active,
.oa-nav-cta:active { transform: translateY(0); }

/* Ghost pill outlined in white on a dark ground -> fill in. */
a[style*="border-radius: 999px"][style*="border: 1px solid rgba(255, 255, 255"]:hover {
  background: #ffffff !important;
  color: #0a1a6e !important;
}

/* Underlined text links that are already white -> brighten, never darken. */
a[style*="border-bottom: 1px solid"][style*="color: rgb(255, 255, 255)"]:hover,
footer a:hover {
  color: #ffffff !important;
  opacity: .72 !important;
}

/* ------------------------------------------------- home hero and firm - */

/* The hero's lower edge is cut diagonally from both sides to a point at the
   centre, so the section reads as a downward arrow. The navigation sits inside
   that notch, which is why the header is lifted out of the clipped element:
   clip-path clips descendants, so a nav inside the hero would be cut off. */
.oa-hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 165px), 50% 100%, 0 calc(100% - 165px));
}

/* Keep centred slide content above the diagonal. Measured: at 1280x600 the
   second slide's link was being cut by 9px without this. */
.oa-hero > div[style*="place-items: center"] { padding-bottom: 165px !important; }

/* The slide buttons live in the point of the arrow. At 30px above the tip the
   notch is still a couple of hundred pixels wide, so the three sit clear of
   the diagonals. */
.oa-hero [style*="bottom: 34px"] { bottom: 56px !important; }

/* Firm section: the mark sits behind the copy, as on the second hero slide. */
.oa-firm-watermark {
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 620px;
  max-width: none;
  opacity: .07;
  transform: rotate(-6deg);
  pointer-events: none;
}
.oa-firm > div { position: relative; z-index: 1; }

@media (max-width: 1024px) {
  .oa-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 110px), 50% 100%, 0 calc(100% - 110px)); }
  .oa-hero [style*="bottom: 34px"] { bottom: 40px !important; }
  .oa-hero > div[style*="place-items: center"] { padding-bottom: 110px !important; }
  .oa-firm-watermark { width: 420px; right: -90px; bottom: -110px; }
}
@media (max-width: 760px) {
  .oa-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 74px), 50% 100%, 0 calc(100% - 74px)); }
  .oa-hero [style*="bottom: 34px"] { bottom: 28px !important; }
  .oa-hero > div[style*="place-items: center"] { padding-bottom: 74px !important; }
  .oa-firm-watermark { width: 320px; right: -70px; bottom: -80px; }
}

/* ------------------------------------------------ embedded careers form - */
/* Google Forms iframes do not resize themselves, so the height is fixed and
   trimmed at narrow widths where the form's own layout gets taller. */
.oa-careers-form, .oa-contact-form { display: block; }
@media (max-width: 760px) { .oa-careers-form { height: 1350px !important; } .oa-contact-form { height: 1420px !important; } }

/* ------------------------------------------------------------- our people - */
.oa-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px}
.oa-person{display:flex;flex-direction:column}
.oa-person-photo{
  aspect-ratio:3/3.2;
  border-radius:8px;
  overflow:hidden;
  background:#eae8e0;
  margin-bottom:18px;
}
.oa-person-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
.oa-person-name{margin:0 0 6px;font:400 27px/1.2 'Playfair Display',Georgia,serif;color:#0d1030}
.oa-person-role{margin:0 0 12px;font:600 11px/1.5 'Libre Franklin',sans-serif;letter-spacing:.08em;color:#1e3fd0}
.oa-person-bio{margin:0;font:400 14px/1.75 'Libre Franklin',sans-serif;color:#41465e}
@media (max-width:760px){
  .oa-people{grid-template-columns:1fr;gap:34px}
  .oa-person-photo{aspect-ratio:3/2.7}
}

/* ------------------------------------------------------ expertise cards - */
/* Each practice states what it covers rather than hiding a contact action
   behind a hover, so the page reads on touch devices too. */
.oa-xcard{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(10,26,110,.14);
  border-radius:8px;
  padding:28px 28px 30px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.oa-xcard:hover{
  border-color:rgba(30,63,208,.45);
  box-shadow:0 10px 26px rgba(10,26,110,.10);
  transform:translateY(-2px);
}
.oa-xnum{font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1e3fd0;letter-spacing:.08em}
.oa-xtitle{margin:0;font:400 23px/1.22 'Playfair Display',Georgia,serif;color:#0d1030}
.oa-xnote{margin:0;font:400 13.5px/1.65 'Libre Franklin',sans-serif;color:#41465e}
/* The diagonal corner grows out of the card on hover to offer contact, the
   same gesture the page had before, now sitting under the note. */
.oa-xcard{padding-bottom:48px}
.oa-xdock{
  position:absolute;
  right:0;
  bottom:0;
  width:52px;
  height:52px;
  background:linear-gradient(315deg,#1e3fd0,#0a1a6e 70%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  transition:width .4s ease,height .4s ease;
  text-decoration:none;
}
.oa-xdock em{position:absolute;right:12px;bottom:8px;font-style:normal;color:#fff;font-size:15px}
.oa-xdock span{
  position:absolute;
  right:16px;
  bottom:34px;
  opacity:0;
  transition:opacity .3s .12s;
  color:#fff;
  font:700 11px 'Libre Franklin',sans-serif;
  letter-spacing:.07em;
  white-space:nowrap;
}
.oa-xcard:hover .oa-xdock{width:72%;height:72%}
.oa-xcard:hover .oa-xdock span{opacity:1}
/* Touch devices never fire hover, so the corner is shown already open with its
   label visible rather than waiting for a hover that never comes. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  /* A percentage wedge grew over the note text. A fixed band across the foot of
     the card keeps the diagonal but reserves its own space. */
  .oa-xcard { padding-bottom: 86px; }
  .oa-xdock { width: 100%; height: 66px; }
  .oa-xdock span { opacity: 1; bottom: 25px; right: 16px; }
  .oa-xdock em { bottom: 6px; right: 13px; }
}
@media (max-width:760px){ .oa-xcard{padding:22px 20px 44px} .oa-xtitle{font-size:21px} }

/* --------------------------------------------------- practice-area list - */

.oa-practices li {
  position: relative;
  padding-left: 16px;
  font: 400 14.5px/1.55 'Libre Franklin', sans-serif;
  color: #41465e;
}
.oa-practices li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1e3fd0;
}

/* ------------------------------------------------------------ hamburger - */

/* The booking CTA lives in the header pill on desktop and inside the hamburger
   panel below the breakpoint. Both exist in the markup; only one ever shows. */
.oa-nav-cta { display: none; }

.oa-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(10, 26, 110, .24);
  border-radius: 10px;
  cursor: pointer;
}
.oa-burger:hover { background: rgba(10, 26, 110, .07); }
.oa-burger span {
  display: block;
  width: 17px;
  height: 2px;
  margin: 0 auto;
  background: #0a1a6e;
  transition: transform .25s ease, opacity .2s ease;
}
html.oa-nav-open .oa-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.oa-nav-open .oa-burger span:nth-child(2) { opacity: 0; }
html.oa-nav-open .oa-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------- tablet <= 1024px - */

@media (max-width: 1024px) {
  /* --- hamburger navigation (tablet and mobile) ---
     The open/closed flag lives on <html>, not on the header: the header is
     rendered by React and a class set on it directly would be dropped on the
     next re-render (the home hero advances every 10s). */
  .oa-burger { display: flex; }

  header > nav {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(10, 26, 110, .14);
    box-shadow: 0 16px 34px rgba(10, 26, 110, .14);
    padding: 4px 0 8px !important;
  }
  html.oa-nav-open header > nav { display: flex !important; }

  header > nav > a {
    padding: 15px 28px !important;
    font-size: 12.5px !important;
    border-bottom: 1px solid rgba(10, 26, 110, .08);
  }
  header > nav > a:last-child { border-bottom: 0; }
  header > nav > a:hover { background: rgba(10, 26, 110, .05); }

  /* Booking moves out of the header and into the menu. */
  header > a[href="Contact.dc.html"] { display: none !important; }
  .oa-nav-cta {
    display: block;
    margin: 10px 20px 4px;
    padding: 15px 20px !important;
    border: 0 !important;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0a1a6e, #1e3fd0);
  }

  /* --- gutters: two-value paddings first --- */
  [style*="padding: 15px 56px"] { padding: 14px 28px !important; }
  [style*="padding: 0px 56px"]  { padding: 0 28px !important; }
  [style*="padding: 44px 56px"] { padding: 36px 28px !important; }
  [style*="padding: 48px 56px"] { padding: 36px 28px !important; }
  [style*="padding: 64px 56px"] { padding: 44px 28px !important; }
  [style*="padding: 72px 56px"] { padding: 48px 28px !important; }
  [style*="padding: 56px"]      { padding: 36px 28px !important; }

  /* --- gutters: three-value paddings override the above --- */
  [style*="padding: 0px 56px 56px"]  { padding: 0 28px 40px !important; }
  [style*="padding: 8px 56px 48px"]  { padding: 8px 28px 32px !important; }
  [style*="padding: 24px 56px 48px"] { padding: 20px 28px 32px !important; }
  [style*="padding: 44px 56px 28px"] { padding: 36px 28px 24px !important; }
  [style*="padding: 52px 56px 30px"] { padding: 40px 28px 24px !important; }
  [style*="padding: 64px 56px 40px"] { padding: 44px 28px 28px !important; }
  [style*="padding: 72px 56px 32px"] { padding: 48px 28px 24px !important; }
  [style*="padding: 72px 56px 48px"] { padding: 48px 28px 32px !important; }
  [style*="padding: 80px 56px 56px"] { padding: 56px 28px 40px !important; }
  [style*="padding: 80px 56px 64px"] { padding: 56px 28px 40px !important; }
  [style*="padding: 90px 56px 56px"] { padding: 84px 28px 40px !important; }

  [style*="margin: 0px 56px 56px"] { margin: 0 28px 40px !important; }
  [style*="margin: 0px 56px 64px"] { margin: 0 28px 40px !important; }

  /* --- editorial two-up splits collapse before the card grids do, because
         each half carries a full column of prose --- */
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(2, minmax(0px, 480px))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  [style*="gap: 64px"] { gap: 40px !important; }
}

/* ------------------------------------------------------- mobile <= 760px - */

@media (max-width: 760px) {
  /* The hero stacks its three slides absolutely, so it still needs a height,
     but it should not eat a whole phone viewport. */
  [style*="margin-top: -67px"] {
    margin-top: 0 !important;
    height: auto !important;
    min-height: 600px !important;
  }


  header[style*="padding: 15px 56px"] { padding: 12px 16px !important; }
  header > a[href="Contact.dc.html"] {
    padding: 11px 15px !important;
    font-size: 10.5px !important;
  }
  header > a[href="Home.dc.html"] img { height: 28px !important; }

  /* --- everything else goes single column ---
         `1fr 1fr` first so `1fr 1fr 1fr` can override it below. */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr auto"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(2, minmax(0px, 480px))"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Banner CTAs: headline above the button rather than beside it. */
  [style*="justify-content: space-between; gap: 40px"],
  [style*="justify-content: space-between; gap: 30px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  /* ...but the header is also space-between, and must stay a row. */
  header[style*="justify-content: space-between"] { flex-direction: row !important; }

  /* Section headers pair a wrapping headline with a "see all" link; let the
     link drop below rather than squeeze the headline.
     Scoped to space-between on purpose: the home Expertise rows are also
     align-items:baseline, and wrapping those broke number/title/arrow apart. */
  [style*="justify-content: space-between; align-items: baseline"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Newsletter input + button stop squeezing. */
  [style*="min-width: 230px"] { min-width: 0 !important; flex: 1 1 180px !important; }

  [style*="gap: 64px"] { gap: 30px !important; flex-wrap: wrap !important; }

  [style*="padding: 32px 32px 48px"] { padding: 26px 24px 44px !important; }
  [style*="padding: 40px"] { padding: 26px !important; }
  [style*="padding: 36px"] { padding: 24px !important; }

  /* Portraits get very tall at full width on a phone. */
  [style*="aspect-ratio: 3 / 3.2"] { aspect-ratio: 3 / 2.7 !important; }
  [style*="aspect-ratio: 3 / 3.4"] { aspect-ratio: 3 / 2.8 !important; }
  [style*="aspect-ratio: 3 / 3.6"] { aspect-ratio: 3 / 3.2 !important; }

}

/* -------------------------------------------------- small phone <= 480px - */

@media (max-width: 480px) {
  [style*="padding: 15px 56px"] { padding: 10px 14px !important; }
  [style*="padding: 0px 56px"]  { padding: 0 18px !important; }
  [style*="padding: 44px 56px"] { padding: 30px 18px !important; }
  [style*="padding: 48px 56px"] { padding: 30px 18px !important; }
  [style*="padding: 64px 56px"] { padding: 32px 18px !important; }
  [style*="padding: 72px 56px"] { padding: 32px 18px !important; }
  [style*="padding: 56px"]      { padding: 28px 18px !important; }

  [style*="padding: 0px 56px 56px"]  { padding: 0 18px 28px !important; }
  [style*="padding: 8px 56px 48px"]  { padding: 8px 18px 28px !important; }
  [style*="padding: 24px 56px 48px"] { padding: 16px 18px 28px !important; }
  [style*="padding: 44px 56px 28px"] { padding: 30px 18px 20px !important; }
  [style*="padding: 52px 56px 30px"] { padding: 30px 18px 20px !important; }
  [style*="padding: 64px 56px 40px"] { padding: 34px 18px 22px !important; }
  [style*="padding: 72px 56px 32px"] { padding: 34px 18px 20px !important; }
  [style*="padding: 72px 56px 48px"] { padding: 34px 18px 26px !important; }
  [style*="padding: 80px 56px 56px"] { padding: 36px 18px 26px !important; }
  [style*="padding: 80px 56px 64px"] { padding: 36px 18px 26px !important; }
  [style*="padding: 90px 56px 56px"] { padding: 70px 18px 28px !important; }

  [style*="margin: 0px 56px 56px"] { margin: 0 18px 28px !important; }
  [style*="margin: 0px 56px 64px"] { margin: 0 18px 28px !important; }

  /* Post and Privacy use a 32px gutter rather than 56px. */
  [style*="padding: 64px 32px 72px"] { padding: 34px 18px 44px !important; }
  [style*="padding: 72px 32px 80px"] { padding: 34px 18px 44px !important; }
  [style*="padding: 48px 32px 80px"] { padding: 28px 18px 44px !important; }

  /* Imagery. */
  [style*="height: 380px"] { height: 210px !important; }
  [style*="height: 340px"] { height: 200px !important; }
  [style*="height: 280px"] { height: 180px !important; }
  [style*="height: 200px"] { height: 160px !important; }
}

/* ------------------------------------------------- people index + profile - */

/* Index cards are a summary only: name, position and four areas. The full
   biography lives on Person.dc.html so this page stays scannable. */
.oa-person-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.oa-person-link:hover .oa-person-name { color: #1e3fd0; }
.oa-person-link:hover .oa-person-photo img { transform: scale(1.03); }
.oa-person-photo img { transition: transform .45s ease; }

.oa-person-areas { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 5px; }
.oa-person-areas li {
  position: relative;
  padding-left: 15px;
  font: 400 13px/1.5 'Libre Franklin', sans-serif;
  color: #41465e;
}
.oa-person-areas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1e3fd0;
}
.oa-person-more {
  margin-top: auto;
  font: 700 10.5px/1 'Libre Franklin', sans-serif;
  letter-spacing: .1em;
  color: #0a1a6e;
}
.oa-person-link:hover .oa-person-more { color: #1e3fd0; }

.oa-profile { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; margin-top: 34px; }
.oa-profile-photo { aspect-ratio: 3 / 3.5; border-radius: 10px; overflow: hidden; background: #eae8e0; }
.oa-profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.oa-profile-name { margin: 0 0 8px; font: 400 clamp(30px, 3.6vw, 42px)/1.15 'Playfair Display', Georgia, serif; color: #0d1030; }
.oa-profile-role { margin: 0 0 26px; font: 600 11.5px/1.5 'Libre Franklin', sans-serif; letter-spacing: .08em; color: #1e3fd0; }
.oa-profile-areas-title { margin: 0 0 10px; font: 700 10.5px/1 'Libre Franklin', sans-serif; letter-spacing: .14em; color: #0a1a6e; }
.oa-profile-areas { margin-bottom: 26px; grid-template-columns: 1fr 1fr; }
.oa-profile-bio { margin: 0 0 18px; font: 400 15.5px/1.8 'Libre Franklin', sans-serif; color: #2a2e45; }
.oa-profile-cta {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
  font: 700 12px/1 'Libre Franklin', sans-serif;
  letter-spacing: .05em;
  color: #fff;
  background: linear-gradient(135deg, #0a1a6e, #1e3fd0);
  padding: 16px 26px;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .oa-profile { grid-template-columns: 1fr; gap: 26px; }
  .oa-profile-photo { aspect-ratio: 3 / 2.7; }
  .oa-profile-areas { grid-template-columns: 1fr; }
}

/* The diagonal removes the hero's bottom corners. The bed behind it is painted
   in the following section's colour so those corners read as part of it. */
.oa-hero-bed { background: #fff; margin-top: -67px; }

/* Second slide's mark sat in the corner the diagonal cuts away; lift it clear. */
.oa-hero [style*="bottom: -120px"] { bottom: 150px !important; right: -90px !important; }

/* The firm section is a single centred column, so on a laptop it should read as
   a deliberate statement rather than a column stranded on the left. */
.oa-firm > div { max-width: 880px; }
@media (min-width: 1025px) {
  .oa-firm > div > h2 { font-size: clamp(34px, 3.9vw, 50px) !important; }
  .oa-firm > div > p { max-width: 720px !important; font-size: 17px !important; }
}

/* ------------------------------------------------------------ share row - */
.oa-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 30px; }
.oa-share-label {
  font: 700 10.5px/1 'Libre Franklin', sans-serif;
  letter-spacing: .14em;
  color: #9a9db0;
  margin-right: 4px;
}
.oa-share-btn {
  font: 600 11.5px/1 'Libre Franklin', sans-serif;
  letter-spacing: .04em;
  color: #0a1a6e;
  background: #fff;
  border: 1px solid rgba(10, 26, 110, .2);
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.oa-share-btn:hover {
  background: #0a1a6e;
  border-color: #0a1a6e;
  color: #fff !important;
}