@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600&display=swap');


/* =========================================================
   TOKENS
========================================================= */

:root{
  --bg:#0A0E1A;
  --bg-alt:#0D1424;
  --bg-raised:#121C33;

  --line:rgba(226,232,245,0.08);
  --line-strong:rgba(226,232,245,0.16);

  --text:#EAEFFB;
  --muted:#93A0B8;
  --muted-dim:#5A6478;

  --brass:#2563EB;
  --brass-bright:#56A3FF;
  --brass-soft:rgba(37,99,235,0.16);

  --teal:#102A5A;

  --radius-lg:22px;
}


/* =========================================================
   RESET / GLOBAL
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,
h2,
h3,
h4{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.14;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

ul{
  list-style:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

a,
button{
  -webkit-tap-highlight-color:transparent;
}

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
}


/* =========================================================
   RESPONSIVE WRAPPER
========================================================= */

@media (max-width:700px){

  .wrap{
    padding-left:24px;
    padding-right:24px;
  }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

}


/* =========================================================
   NAVIGATION
========================================================= */

header{
  position:fixed;
  top:0;
  left:0;
  right:0;

  width:100%;
  height:76px;

  z-index:200;

  background:rgba(10,14,26,0.78);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border-bottom:1px solid var(--line);
}

.nav{
  width:100%;
  height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  position:relative;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;

  font-family:'Fraunces',serif;
  font-size:20px;
  font-weight:500;

  color:var(--text);

  flex-shrink:0;
}

.logo-chip{
  background:#fff;
  border-radius:9px;

  padding:4px 8px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;

  flex-shrink:0;
}

.logo-chip img{
  height:26px;
  width:auto;
  max-width:120px;
  display:block;
}

.logo-mark{
  width:30px;
  height:30px;

  border-radius:50%;

  background:
    conic-gradient(
      from 220deg,
      var(--brass),
      #7c633a,
      var(--teal),
      var(--brass)
    );

  position:relative;
  flex-shrink:0;
}

.logo-mark::after{
  content:'';

  position:absolute;
  inset:6px;

  border-radius:50%;

  background:var(--bg);
}


/* Desktop navigation */

nav.links{
  display:flex;
  align-items:center;
  gap:26px;
}

nav.links a{
  font-size:14px;
  color:var(--muted);

  position:relative;

  padding:4px 0;

  transition:color .3s ease;

  white-space:nowrap;
}

nav.links a::after{
  content:'';

  position:absolute;
  left:0;
  bottom:0;

  width:0;
  height:1px;

  background:var(--brass);

  transition:width .35s ease;
}

nav.links a:hover,
nav.links a.active{
  color:var(--text);
}

nav.links a:hover::after,
nav.links a.active::after{
  width:100%;
}


/* Navigation CTA */

.nav-cta{
  border:1px solid var(--line-strong);

  padding:10px 22px;

  border-radius:100px;

  font-size:14px;
  color:var(--text);

  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;

  white-space:nowrap;
}

.nav-cta:hover{
  border-color:var(--brass);
  background:var(--brass-soft);
}


/* Hamburger */

.nav-toggle{
  display:none;

  width:44px;
  height:44px;

  border:1px solid var(--line-strong);
  border-radius:50%;

  align-items:center;
  justify-content:center;

  cursor:pointer;

  background:transparent;

  flex-shrink:0;

  position:relative;

  padding:0;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  display:block;

  width:16px;
  height:1px;

  background:var(--text);

  position:relative;

  transition:
    transform .3s ease,
    opacity .3s ease;
}

.nav-toggle span::before,
.nav-toggle span::after{
  content:'';

  position:absolute;

  left:0;
}

.nav-toggle span::before{
  top:-5px;
}

.nav-toggle span::after{
  top:5px;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width:1050px){

  nav.links,
  header > .nav > .nav-cta,
  .nav > .nav-cta{
    display:none;
  }

  .nav-toggle{
    display:flex;
  }

}


/*
   Mobile menu starts exactly below the 76px header.
*/

.mobile-menu{
  position:fixed;

  top:76px;
  left:0;
  right:0;
  bottom:0;

  width:100%;

  z-index:150;

  background:var(--bg-alt);

  border-top:1px solid var(--line);

  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;

  transform:translateY(-10px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;

  display:none;
}

@media (max-width:1050px){

  .mobile-menu{
    display:block;
  }

}

.mobile-menu.open{
  opacity:1;

  transform:translateY(0);

  visibility:visible;

  pointer-events:auto;
}


/* Mobile menu content */

.mobile-menu .wrap{
  width:100%;

  padding-top:20px;

  padding-bottom:
    max(40px, env(safe-area-inset-bottom));

  display:flex;

  flex-direction:column;

  gap:0;
}


/* Mobile links */

.mobile-menu a{
  display:block;

  width:100%;

  font-family:'Fraunces',serif;

  font-size:24px;

  line-height:1.2;

  font-weight:400;

  color:var(--text);

  padding:20px 0;

  border-bottom:1px solid var(--line);

  transition:
    color .25s ease,
    padding-left .25s ease;
}

.mobile-menu a:hover{
  color:var(--brass-bright);
  padding-left:6px;
}


/* Mobile CTA */

.mobile-menu .nav-cta{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:max-content;

  max-width:100%;

  margin-top:28px;

  padding:13px 22px;

  border:1px solid var(--line-strong);

  border-radius:100px;

  font-family:'Inter',sans-serif;

  font-size:14px;

  color:var(--text);
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  padding:15px 30px;

  border-radius:100px;

  font-size:14.5px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    background .3s ease,
    border-color .3s ease,
    color .3s ease;

  cursor:pointer;

  border:none;

  font-family:'Inter',sans-serif;

  text-align:center;
}

.btn-primary{
  background:var(--brass);
  color:#100D08;
  font-weight:500;
}

.btn-primary:hover{
  transform:translateY(-2px);
  background:var(--brass-bright);
}

.btn-ghost{
  border:1px solid var(--line-strong);
  color:var(--text);
  background:transparent;
}

.btn-ghost:hover{
  transform:translateY(-2px);
  border-color:var(--brass);
}


/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  padding-top:76px;

  overflow:hidden;
}

.hero-glow{
  position:absolute;

  top:-20%;
  right:-10%;

  width:70%;
  height:120%;

  background:
    radial-gradient(
      closest-side,
      rgba(37,99,235,0.14),
      transparent 70%
    );

  pointer-events:none;

  animation:driftGlow 18s ease-in-out infinite;
}

.hero-glow.two{
  top:30%;
  left:-15%;
  right:auto;

  width:50%;

  background:
    radial-gradient(
      closest-side,
      rgba(16,42,90,0.22),
      transparent 70%
    );

  animation:driftGlow 22s ease-in-out infinite reverse;
}

@keyframes driftGlow{

  0%,
  100%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(-30px,24px) scale(1.08);
  }

}

.hero-grid{
  position:relative;

  display:grid;

  grid-template-columns:1.3fr .7fr;

  gap:60px;

  align-items:end;

  padding:120px 0 90px;
}

@media (max-width:900px){

  .hero-grid{
    grid-template-columns:1fr;

    gap:40px;

    padding:90px 0 60px;
  }

}


/* Hero text */

.eyebrow{
  font-size:13.5px;

  color:var(--brass);

  margin-bottom:26px;

  display:flex;

  align-items:center;

  gap:10px;

  opacity:0;

  animation:riseIn .8s ease forwards;

  animation-delay:.1s;
}

.eyebrow-line{
  width:34px;
  height:1px;

  background:var(--brass);

  flex-shrink:0;
}

.hero h1{
  font-size:clamp(40px,6.2vw,80px);

  color:var(--text);

  max-width:820px;

  opacity:0;

  animation:riseIn .9s ease forwards;

  animation-delay:.22s;
}

.hero h1 em{
  font-style:italic;
  color:var(--muted);
}

.hero-sub{
  margin-top:30px;

  max-width:480px;

  color:var(--muted);

  font-size:17px;

  opacity:0;

  animation:riseIn .9s ease forwards;

  animation-delay:.38s;
}

.hero-actions{
  margin-top:44px;

  display:flex;

  gap:18px;

  flex-wrap:wrap;

  opacity:0;

  animation:riseIn .9s ease forwards;

  animation-delay:.52s;
}

.hero-panel{
  opacity:0;

  animation:riseIn 1s ease forwards;

  animation-delay:.5s;

  border-left:1px solid var(--line);

  padding-left:36px;
}

@media (max-width:900px){

  .hero-panel{
    border-left:none;

    padding-left:0;

    border-top:1px solid var(--line);

    padding-top:32px;
  }

}

.hero-stat{
  margin-bottom:28px;
}

.hero-stat:last-child{
  margin-bottom:0;
}

.hero-stat .num{
  font-family:'Fraunces',serif;

  font-size:34px;

  color:var(--brass);
}

.hero-stat .label{
  color:var(--muted);

  font-size:14px;

  margin-top:4px;
}

@keyframes riseIn{

  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}


/* =========================================================
   PAGE BANNER
========================================================= */

.page-banner{
  position:relative;

  padding:190px 0 90px;

  overflow:hidden;
}

.page-banner .hero-glow{
  opacity:.8;
}

.page-kicker{
  font-size:13.5px;

  color:var(--brass);

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:22px;

  opacity:0;

  animation:riseIn .8s ease forwards;

  animation-delay:.05s;
}

.page-banner h1{
  font-size:clamp(36px,5.4vw,66px);

  max-width:760px;

  opacity:0;

  animation:riseIn .9s ease forwards;

  animation-delay:.15s;
}

.page-banner h1 em{
  font-style:italic;
  color:var(--muted);
}

.page-banner p{
  margin-top:24px;

  max-width:560px;

  color:var(--muted);

  font-size:17px;

  opacity:0;

  animation:riseIn .9s ease forwards;

  animation-delay:.3s;
}


/* =========================================================
   SECTIONS
========================================================= */

section{
  padding:130px 0;

  position:relative;
}

@media (max-width:700px){

  section{
    padding:80px 0;
  }

}

.section-alt{
  background:var(--bg-alt);
}


/* Section heading */

.section-head{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:40px;

  margin-bottom:70px;

  align-items:end;
}

@media (max-width:800px){

  .section-head{
    grid-template-columns:1fr;

    gap:20px;

    margin-bottom:45px;
  }

}

.kicker{
  font-size:13.5px;

  color:var(--brass);

  letter-spacing:.04em;
}

.section-head h2{
  font-size:clamp(30px,3.6vw,46px);

  margin-top:14px;

  color:var(--text);
}

.section-head p{
  color:var(--muted);

  font-size:16px;

  max-width:400px;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
  opacity:0;

  transform:translateY(24px);

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1);
}

.reveal.in{
  opacity:1;

  transform:translateY(0);
}

.feature-row,
.showcase-item,
.brand-detail,
.eco-row{
  opacity:0;

  transform:translateY(16px);
}

.reveal.in .feature-row,
.reveal.in .showcase-item,
.reveal.in .brand-detail,
.reveal.in .eco-row{
  animation:rowIn .7s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes rowIn{

  to{
    opacity:1;
    transform:translateY(0);
  }

}

.reveal.in .feature-row:nth-child(1),
.reveal.in .showcase-item:nth-child(1),
.reveal.in .brand-detail:nth-child(1),
.reveal.in .eco-row:nth-child(1){
  animation-delay:.05s;
}

.reveal.in .feature-row:nth-child(2),
.reveal.in .showcase-item:nth-child(2),
.reveal.in .brand-detail:nth-child(2),
.reveal.in .eco-row:nth-child(2){
  animation-delay:.13s;
}

.reveal.in .feature-row:nth-child(3),
.reveal.in .showcase-item:nth-child(3),
.reveal.in .brand-detail:nth-child(3),
.reveal.in .eco-row:nth-child(3){
  animation-delay:.21s;
}

.reveal.in .feature-row:nth-child(4),
.reveal.in .showcase-item:nth-child(4),
.reveal.in .brand-detail:nth-child(4),
.reveal.in .eco-row:nth-child(4){
  animation-delay:.29s;
}

.reveal.in .feature-row:nth-child(5),
.reveal.in .showcase-item:nth-child(5),
.reveal.in .brand-detail:nth-child(5),
.reveal.in .eco-row:nth-child(5){
  animation-delay:.37s;
}

.reveal.in .feature-row:nth-child(6),
.reveal.in .showcase-item:nth-child(6),
.reveal.in .brand-detail:nth-child(6),
.reveal.in .eco-row:nth-child(6){
  animation-delay:.45s;
}

hr.divider{
  border:none;

  border-top:1px solid var(--line);
}


/* =========================================================
   CAPABILITIES
========================================================= */

.capabilities{
  display:grid;

  grid-template-columns:repeat(2,1fr);
}

@media (max-width:750px){

  .capabilities{
    grid-template-columns:1fr;
  }

}

.cap-item{
  border-top:1px solid var(--line);

  border-right:1px solid var(--line);

  padding:44px 44px 44px 0;
}

.cap-item:nth-child(2n){
  border-right:none;

  padding-left:44px;
}

@media (max-width:750px){

  .cap-item{
    border-right:none;

    padding:36px 0;
  }

  .cap-item:nth-child(2n){
    padding-left:0;
  }

}

.cap-item:nth-child(-n+2){
  border-top:1px solid var(--line);
}

.cap-item:nth-last-child(-n+2){
  border-bottom:1px solid var(--line);
}

@media (max-width:750px){

  .cap-item:nth-last-child(-n+2){
    border-bottom:none;
  }

  .cap-item:last-child{
    border-bottom:1px solid var(--line);
  }

}

.cap-tag{
  font-size:13px;

  color:var(--muted-dim);

  margin-bottom:18px;
}

.cap-item h3{
  font-size:25px;

  color:var(--text);

  margin-bottom:14px;
}

.cap-item p{
  color:var(--muted);

  font-size:15.5px;

  max-width:440px;
}

.cap-link{
  display:inline-flex;

  margin-top:22px;

  font-size:14px;

  color:var(--brass);

  border-bottom:1px solid transparent;

  transition:border-color .3s ease;
}

.cap-link:hover{
  border-color:var(--brass);
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.eco-row{
  display:grid;

  grid-template-columns:220px 1fr 140px;

  gap:32px;

  align-items:center;

  padding:34px 0;

  border-top:1px solid var(--line);

  transition:background .4s ease;
}

.ecosystem-list .eco-row:last-child{
  border-bottom:1px solid var(--line);
}

.eco-row:hover{
  background:rgba(226,232,245,0.02);
}

@media (max-width:800px){

  .eco-row{
    grid-template-columns:1fr;

    gap:10px;

    padding:26px 0;
  }

}

.eco-name{
  font-family:'Fraunces',serif;

  font-size:24px;

  color:var(--text);

  transition:color .3s ease;
}

.eco-row:hover .eco-name{
  color:var(--brass);
}

.eco-focus{
  color:var(--muted);

  font-size:14.5px;

  max-width:560px;
}

.eco-arrow{
  justify-self:end;

  display:flex;

  align-items:center;

  gap:8px;

  color:var(--muted-dim);

  font-size:13.5px;

  transition:
    color .3s ease,
    transform .3s ease;
}

.eco-row:hover .eco-arrow{
  color:var(--brass);

  transform:translateX(4px);
}

@media (max-width:800px){

  .eco-arrow{
    justify-self:start;
  }

}


/* =========================================================
   BRAND DETAIL
========================================================= */

.brand-detail{
  display:grid;

  grid-template-columns:.55fr 1fr;

  gap:70px;

  align-items:center;

  padding:80px 0;

  border-top:1px solid var(--line);
}

.brand-detail:last-child{
  border-bottom:1px solid var(--line);
}

.brand-detail:nth-child(even){
  grid-template-columns:1fr .55fr;
}

.brand-detail:nth-child(even) .brand-visual{
  order:2;
}

@media (max-width:850px){

  .brand-detail,
  .brand-detail:nth-child(even){
    grid-template-columns:1fr;

    gap:34px;

    padding:56px 0;
  }

  .brand-detail:nth-child(even) .brand-visual{
    order:0;
  }

}

.brand-visual{
  aspect-ratio:4/3;

  border-radius:var(--radius-lg);

  position:relative;

  overflow:hidden;

  border:1px solid var(--line-strong);

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:0;
}

.brand-visual .bv-index{
  font-family:'Fraunces',serif;

  font-size:120px;

  color:rgba(226,232,245,0.06);
}

.brand-visual.v1{
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(37,99,235,.20),
      transparent 60%
    ),
    var(--bg-raised);
}

.brand-visual.v2{
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(16,42,90,.28),
      transparent 60%
    ),
    var(--bg-raised);
}

.brand-visual.v3{
  background:
    radial-gradient(
      circle at 30% 70%,
      rgba(37,99,235,.16),
      transparent 60%
    ),
    var(--bg-raised);
}

.brand-visual.v4{
  background:
    radial-gradient(
      circle at 70% 70%,
      rgba(16,42,90,.20),
      transparent 60%
    ),
    var(--bg-raised);
}

.brand-visual.v5{
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(37,99,235,.22),
      transparent 60%
    ),
    var(--bg-raised);
}

.brand-visual img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transform:scale(1.06);
}

.brand-num{
  font-size:13px;

  color:var(--muted-dim);

  margin-bottom:16px;
}

.brand-copy h3{
  font-size:32px;

  color:var(--text);

  margin-bottom:6px;
}

.brand-copy .brand-cat{
  color:var(--brass);

  font-size:14.5px;

  margin-bottom:20px;

  display:block;
}

.brand-copy p{
  color:var(--muted);

  font-size:15.5px;

  max-width:480px;

  margin-bottom:24px;
}

.focus-tags{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:26px;
}

.focus-tags span{
  border:1px solid var(--line-strong);

  border-radius:100px;

  padding:7px 16px;

  font-size:13px;

  color:var(--muted);
}


/* =========================================================
   PROCESS TIMELINE
========================================================= */

.process-track{
  position:relative;

  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:0;
}

@media (max-width:900px){

  .process-track{
    grid-template-columns:1fr;

    gap:0;
  }

}

.process-track::before{
  content:'';

  position:absolute;

  top:11px;
  left:0;
  right:0;

  height:1px;

  background:var(--line-strong);
}

@media (max-width:900px){

  .process-track::before{
    top:0;
    bottom:0;

    left:11px;
    right:auto;

    width:1px;
    height:auto;
  }

}

.process-track.cols-6{
  grid-template-columns:repeat(6,1fr);
}

@media (max-width:900px){

  .process-track.cols-6{
    grid-template-columns:1fr;
  }

}

.process-step{
  position:relative;

  padding:44px 26px 0 0;
}

@media (max-width:900px){

  .process-step{
    padding:0 0 44px 44px;
  }

}

.process-step::before{
  content:'';

  position:absolute;

  top:0;
  left:0;

  width:23px;
  height:23px;

  border-radius:50%;

  background:var(--bg);

  border:1px solid var(--brass);
}

.process-step::after{
  content:'';

  position:absolute;

  top:8px;
  left:8px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--brass);
}

.process-step h4{
  font-size:19px;

  color:var(--text);

  margin-bottom:10px;
}

.process-step p{
  color:var(--muted);

  font-size:14.5px;

  max-width:220px;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.principles{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:2px;

  background:var(--line);

  border:1px solid var(--line);
}

@media (max-width:800px){

  .principles{
    grid-template-columns:1fr;
  }

}

.principle{
  background:var(--bg);

  padding:46px;
}

@media (max-width:600px){

  .principle{
    padding:32px 24px;
  }

}

.principle h3{
  font-size:21px;

  color:var(--text);

  margin-bottom:12px;
}

.principle p{
  color:var(--muted);

  font-size:15px;
}


/* =========================================================
   BELIEF / CTA
========================================================= */

.belief{
  text-align:left;

  padding:150px 0;

  position:relative;

  overflow:hidden;

  background:var(--bg-alt);
}

.belief-canvas{
  position:absolute;

  inset:0;

  z-index:0;

  width:100%;
  height:100%;

  display:block;
}

.belief h2{
  font-size:clamp(30px,4.4vw,54px);

  max-width:900px;

  color:var(--text);
}

.belief h2 em{
  font-style:italic;

  color:var(--brass);
}

.belief p.tag{
  margin-top:30px;

  color:var(--muted);

  font-size:17px;

  max-width:560px;
}

@media (max-width:700px){

  .belief{
    padding:90px 0;
  }

  .belief p.tag{
    font-size:15.5px;
  }

}


/* =========================================================
   PARTNERS
========================================================= */

.partner-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:2px;

  background:var(--line);

  border:1px solid var(--line);
}

@media (max-width:800px){

  .partner-grid{
    grid-template-columns:1fr;
  }

}

.partner-card{
  background:var(--bg);

  padding:44px;
}

@media (max-width:600px){

  .partner-card{
    padding:32px 24px;
  }

}

.partner-card h3{
  font-size:22px;

  margin-bottom:12px;

  color:var(--text);
}

.partner-card p{
  color:var(--muted);

  font-size:15px;
}


/* =========================================================
   OPPORTUNITIES
========================================================= */

.opportunity-list{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:16px 40px;
}

@media (max-width:700px){

  .opportunity-list{
    grid-template-columns:1fr;
  }

}

.opportunity-list li{
  padding:16px 0;

  border-bottom:1px solid var(--line);

  color:var(--muted);

  font-size:15.5px;

  display:flex;

  gap:14px;

  align-items:baseline;
}

.opportunity-list li::before{
  content:'—';

  color:var(--brass);

  flex-shrink:0;
}


/* =========================================================
   OFFICE CARDS
========================================================= */

.offices{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:2px;

  background:var(--line);

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  overflow:hidden;
}

@media (max-width:800px){

  .offices{
    grid-template-columns:1fr;
  }

}

.office-card{
  background:var(--bg);

  padding:48px;
}

@media (max-width:600px){

  .office-card{
    padding:34px 24px;
  }

}

.office-card .office-tag{
  font-size:13px;

  color:var(--brass);

  margin-bottom:18px;
}

.office-card h3{
  font-size:26px;

  margin-bottom:18px;

  color:var(--text);
}

.office-card address{
  font-style:normal;

  color:var(--muted);

  font-size:15.5px;

  line-height:1.9;
}

.office-card .office-phone{
  margin-top:22px;

  padding-top:22px;

  border-top:1px solid var(--line);

  font-size:15px;
}

.office-card .office-phone a{
  color:var(--text);

  display:block;

  margin-top:6px;

  transition:color .3s ease;
}

.office-card .office-phone a:hover{
  color:var(--brass);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-grid{
  display:grid;

  grid-template-columns:.9fr 1.1fr;

  gap:80px;
}

@media (max-width:900px){

  .contact-grid{
    grid-template-columns:1fr;

    gap:50px;
  }

}

.contact-types{
  margin-top:36px;
}

.ctype{
  padding:20px 0;

  border-top:1px solid var(--line);

  color:var(--muted);

  font-size:14.5px;
}

.ctype b{
  color:var(--text);

  font-weight:500;

  display:block;

  margin-bottom:4px;

  font-family:'Fraunces',serif;

  font-size:16.5px;
}

.contact-types .ctype:last-child{
  border-bottom:1px solid var(--line);
}


/* =========================================================
   CONTACT FORM
========================================================= */

.field{
  margin-bottom:22px;
}

.field label{
  display:block;

  font-size:13px;

  color:var(--muted-dim);

  margin-bottom:8px;
}

.field input,
.field select,
.field textarea{
  width:100%;

  background:transparent;

  border:none;

  border-bottom:1px solid var(--line-strong);

  color:var(--text);

  font-family:'Inter',sans-serif;

  font-size:15.5px;

  padding:10px 2px;

  outline:none;

  transition:border-color .3s ease;

  border-radius:0;

  appearance:auto;
}

.field select option{
  background:var(--bg-alt);

  color:var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--brass);
}

.field textarea{
  resize:vertical;

  min-height:80px;
}

/* Some browsers force a light background on inputs once they have content,
   ignoring our transparent background — this forces it to stay dark. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0px 1000px var(--bg-alt) inset;
  box-shadow:0 0 0px 1000px var(--bg-alt) inset;
  transition:background-color 5000s ease-in-out 0s;
}

.two-col{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:22px;
}

@media (max-width:520px){

  .two-col{
    grid-template-columns:1fr;

    gap:0;
  }

}

.submit-btn{
  margin-top:10px;

  background:var(--brass);

  color:#100D08;

  border:none;

  padding:16px 34px;

  border-radius:100px;

  font-size:14.5px;

  font-family:'Inter',sans-serif;

  font-weight:500;

  cursor:pointer;

  transition:
    transform .35s ease,
    background .3s ease;
}

.submit-btn:hover{
  transform:translateY(-2px);

  background:var(--brass-bright);
}

.form-note{
  margin-top:16px;

  font-size:13px;

  color:var(--muted-dim);
}


/* =========================================================
   SUCCESS CONFIRMATION PANEL
========================================================= */

.submit-success{
  text-align:center;
  padding:60px 20px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:var(--bg-alt);
}

.submit-success .success-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  margin:0 auto 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brass-soft);
  color:var(--brass);
}

.submit-success h3{
  font-size:26px;
  color:var(--text);
  margin-bottom:12px;
}

.submit-success p{
  color:var(--muted);
  font-size:15.5px;
  max-width:400px;
  margin:0 auto;
}


/* =========================================================
   MAP
========================================================= */

.map-strip{
  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  overflow:hidden;

  margin-top:60px;
}

.map-strip iframe{
  width:100%;

  height:340px;

  border:0;

  display:block;

  filter:
    grayscale(1)
    invert(.92)
    contrast(.9);
}

@media (max-width:600px){

  .map-strip{
    margin-top:40px;

    border-radius:16px;
  }

  .map-strip iframe{
    height:280px;
  }

}


/* =========================================================
   FOOTER
========================================================= */

footer{
  border-top:1px solid var(--line);

  padding:70px 0 40px;
}

.footer-top{
  display:grid;

  grid-template-columns:1.4fr 1fr 1fr 1fr;

  gap:40px;

  margin-bottom:60px;
}

@media (max-width:800px){

  .footer-top{
    grid-template-columns:1fr 1fr;

    gap:40px 30px;
  }

}

@media (max-width:520px){

  .footer-top{
    grid-template-columns:1fr;

    gap:34px;
  }

}

.footer-brand .logo{
  margin-bottom:16px;
}

.footer-brand p{
  color:var(--muted);

  font-size:14.5px;

  max-width:280px;
}

.footer-col h5{
  font-size:13px;

  color:var(--muted-dim);

  margin-bottom:18px;

  font-weight:500;
}

.footer-col a{
  display:block;

  color:var(--muted);

  font-size:14.5px;

  margin-bottom:12px;

  transition:color .3s ease;
}

.footer-col a:hover{
  color:var(--brass);
}

.footer-bottom{
  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-top:30px;

  border-top:1px solid var(--line);

  color:var(--muted-dim);

  font-size:13.5px;

  flex-wrap:wrap;

  gap:14px;
}

.footer-bottom a{
  color:var(--muted-dim);
}

.footer-bottom a:hover{
  color:var(--text);
}

@media (max-width:520px){

  footer{
    padding:55px 0 30px;
  }

  .footer-bottom{
    flex-direction:column;

    align-items:flex-start;

    gap:8px;
  }

}


/* =========================================================
   CURSOR GLOW
========================================================= */

.cursor-glow{
  position:fixed;

  top:0;
  left:0;

  width:520px;
  height:520px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(37,99,235,0.16),
      transparent 68%
    );

  pointer-events:none;

  z-index:5;

  transform:translate(-50%,-50%);

  opacity:0;

  transition:opacity .4s ease;

  mix-blend-mode:screen;
}

.cursor-glow.active{
  opacity:1;
}

@media (max-width:900px){

  .cursor-glow{
    display:none;
  }

}


/* =========================================================
   MARQUEE
========================================================= */

.marquee-strip{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  overflow:hidden;

  padding:26px 0;

  background:var(--bg-alt);
}

.marquee-track{
  display:flex;

  width:max-content;

  animation:marquee 32s linear infinite;
}

.marquee-track span{
  font-family:'Fraunces',serif;

  font-size:22px;

  color:var(--muted-dim);

  padding:0 36px;

  white-space:nowrap;

  display:flex;

  align-items:center;

  gap:36px;
}

.marquee-track span::after{
  content:'\2726';

  color:var(--brass);

  font-size:13px;
}

@keyframes marquee{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}

@media (max-width:600px){

  .marquee-strip{
    padding:20px 0;
  }

  .marquee-track span{
    font-size:18px;

    padding:0 24px;

    gap:24px;
  }

}


/* =========================================================
   MAGNETIC BUTTONS
========================================================= */

.magnetic{
  position:relative;

  will-change:transform;
}


/* =========================================================
   SHOWCASE LIST
========================================================= */

.showcase-list{
  border-top:1px solid var(--line);
}

.showcase-item{
  border-bottom:1px solid var(--line);

  padding:38px 0;

  position:relative;

  cursor:pointer;

  overflow:hidden;
}

.showcase-head{
  display:grid;

  grid-template-columns:70px 1fr auto;

  align-items:center;

  gap:28px;

  position:relative;

  z-index:2;
}

.showcase-index{
  font-size:14px;

  color:var(--muted-dim);

  font-family:'Fraunces',serif;

  transition:color .4s ease;
}

.showcase-title{
  font-size:clamp(24px,3.2vw,40px);

  color:var(--text);

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    color .4s ease;
}

.showcase-arrow{
  width:46px;
  height:46px;

  border-radius:50%;

  border:1px solid var(--line-strong);

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--muted);

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    border-color .4s ease,
    color .4s ease,
    background .4s ease;

  flex-shrink:0;
}

.showcase-body{
  max-height:0;

  opacity:0;

  overflow:hidden;

  transition:
    max-height .55s cubic-bezier(.2,.8,.2,1),
    opacity .5s ease,
    margin-top .5s ease;

  display:grid;

  grid-template-columns:70px 1fr;

  gap:28px;
}

.showcase-body-inner{
  padding-top:0;

  max-width:520px;

  color:var(--muted);

  font-size:15.5px;
}

.showcase-body-inner a{
  display:inline-flex;

  margin-top:18px;

  color:var(--brass);

  font-size:14px;

  border-bottom:1px solid transparent;

  transition:border-color .3s ease;
}

.showcase-body-inner a:hover{
  border-color:var(--brass);
}

.showcase-item::before{
  content:'';

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      120deg,
      rgba(37,99,235,0.10),
      transparent 60%
    );

  transform:translateX(-100%);

  transition:transform .6s cubic-bezier(.2,.8,.2,1);

  z-index:1;
}

.showcase-item:hover::before{
  transform:translateX(0);
}

.showcase-item:hover .showcase-index{
  color:var(--brass);
}

.showcase-item:hover .showcase-title{
  transform:translateX(14px);

  color:var(--brass-bright);
}

.showcase-item:hover .showcase-arrow{
  border-color:var(--brass);

  color:var(--brass);

  transform:rotate(45deg);
}

.showcase-item.open .showcase-body{
  max-height:200px;

  opacity:1;

  margin-top:22px;
}

.showcase-item.open .showcase-arrow{
  transform:rotate(90deg);

  background:var(--brass-soft);

  border-color:var(--brass);

  color:var(--brass);
}


/* Showcase mobile */

@media (max-width:700px){

  .showcase-item{
    padding:28px 0;
  }

  .showcase-head{
    grid-template-columns:36px 1fr 40px;

    gap:14px;
  }

  .showcase-index{
    font-size:12px;
  }

  .showcase-title{
    font-size:25px;

    line-height:1.2;
  }

  .showcase-arrow{
    width:40px;
    height:40px;
  }

  .showcase-body{
    grid-template-columns:36px 1fr;

    gap:14px;
  }

  .showcase-body-inner{
    font-size:14.5px;
  }

  .showcase-item:hover .showcase-title{
    transform:none;
  }

  .showcase-item:hover::before{
    transform:none;
  }

}


/* =========================================================
   ECOSYSTEM HOVER PREVIEW
========================================================= */

.eco-preview{
  position:fixed;

  top:0;
  left:0;

  width:220px;
  height:150px;

  border-radius:14px;

  pointer-events:none;

  z-index:60;

  overflow:hidden;

  opacity:0;

  transform:
    translate(-50%,-50%)
    scale(.92);

  transition:
    opacity .3s ease,
    transform .3s ease;

  border:1px solid var(--line-strong);
}

.eco-preview.active{
  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);
}

.eco-preview .ep-inner{
  width:100%;
  height:100%;

  display:flex;

  align-items:center;
  justify-content:center;

  font-family:'Fraunces',serif;

  font-size:15px;

  color:var(--muted);

  text-align:center;

  padding:14px;
}

.eco-preview.v1{
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(37,99,235,.38),
      transparent 60%
    ),
    var(--bg-raised);
}

.eco-preview.v2{
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(16,42,90,.5),
      transparent 60%
    ),
    var(--bg-raised);
}

.eco-preview.v3{
  background:
    radial-gradient(
      circle at 30% 70%,
      rgba(37,99,235,.28),
      transparent 60%
    ),
    var(--bg-raised);
}

.eco-preview.v4{
  background:
    radial-gradient(
      circle at 70% 70%,
      rgba(16,42,90,.4),
      transparent 60%
    ),
    var(--bg-raised);
}

.eco-preview.v5{
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(37,99,235,.32),
      transparent 60%
    ),
    var(--bg-raised);
}

@media (max-width:900px){

  .eco-preview{
    display:none;
  }

}


/* =========================================================
   FEATURE LIST
========================================================= */

.feature-list{
  border-top:1px solid var(--line);
}

.feature-row{
  display:grid;

  grid-template-columns:64px 1fr;

  gap:28px;

  padding:32px 0 32px 24px;

  border-bottom:1px solid var(--line);

  position:relative;

  transition:
    background .4s ease,
    padding-left .4s cubic-bezier(.2,.8,.2,1);
}

.feature-row::before{
  content:'';

  position:absolute;

  left:0;

  top:0;
  bottom:0;

  width:3px;

  background:var(--brass);

  transform:scaleY(0);

  transform-origin:top;

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1);
}

.feature-row:hover{
  background:rgba(226,232,245,0.025);

  padding-left:32px;
}

.feature-row:hover::before{
  transform:scaleY(1);
}

.feature-row .f-index{
  font-family:'Fraunces',serif;

  color:var(--muted-dim);

  font-size:14px;

  padding-top:4px;

  transition:color .4s ease;
}

.feature-row:hover .f-index{
  color:var(--brass);
}

.feature-row h3{
  font-size:22px;

  color:var(--text);

  margin-bottom:10px;
}

.feature-row p{
  color:var(--muted);

  font-size:15.5px;

  max-width:540px;
}

@media (max-width:600px){

  .feature-row{
    grid-template-columns:30px 1fr;

    gap:14px;

    padding:28px 0 28px 8px;
  }

  .feature-row:hover{
    padding-left:8px;
  }

  .feature-row h3{
    font-size:20px;
  }

  .feature-row p{
    font-size:14.5px;
  }

}


/* =========================================================
   OFFICES FLOW
========================================================= */

.offices-flow{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  border-top:1px solid var(--line);

  padding-top:52px;
}

.offices-flow .office-col{
  position:relative;
}

.offices-flow .office-col + .office-col{
  border-left:1px solid var(--line);

  padding-left:70px;
}

@media (max-width:800px){

  .offices-flow{
    grid-template-columns:1fr;

    gap:44px;
  }

  .offices-flow .office-col + .office-col{
    border-left:none;

    padding-left:0;

    border-top:1px solid var(--line);

    padding-top:44px;
  }

}


/* =========================================================
   STAT FLOW
========================================================= */

.stat-flow{
  display:flex;

  flex-wrap:wrap;

  align-items:baseline;

  gap:16px 46px;

  padding:36px 0;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);
}

.stat-flow .stat-item{
  display:flex;

  align-items:baseline;

  gap:10px;
}

.stat-flow .num{
  font-family:'Fraunces',serif;

  font-size:30px;

  color:var(--brass);
}

.stat-flow .label{
  color:var(--muted);

  font-size:13.5px;
}

.stat-flow .sep{
  color:var(--muted-dim);

  font-size:20px;
}

@media (max-width:700px){

  .stat-flow{
    gap:24px;

    padding:28px 0;
  }

  .stat-flow .sep{
    display:none;
  }

  .stat-flow .stat-item{
    width:100%;
  }

}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-row{
  display:flex;

  gap:14px;

  margin-top:22px;

  flex-wrap:wrap;
}

.social-row a{
  width:42px;
  height:42px;

  border-radius:50%;

  border:1px solid var(--line-strong);

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--muted);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    color .3s ease,
    background .3s ease;
}

.social-row a:hover{
  transform:translateY(-4px);

  border-color:var(--brass);

  color:var(--brass);

  background:var(--brass-soft);
}

.social-row svg{
  width:17px;
  height:17px;
}


/* =========================================================
   INSIGHTS
========================================================= */

.cat-filter{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:44px;
}

.cat-pill{
  border:1px solid var(--line-strong);

  border-radius:100px;

  padding:9px 18px;

  font-size:13.5px;

  color:var(--muted);

  cursor:pointer;

  background:transparent;

  font-family:'Inter',sans-serif;

  transition:
    border-color .3s ease,
    color .3s ease,
    background .3s ease;
}

.cat-pill:hover{
  border-color:var(--brass);

  color:var(--text);
}

.cat-pill.active{
  background:var(--brass);

  border-color:var(--brass);

  color:#100D08;
}

.insight-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:2px;

  background:var(--line);

  border:1px solid var(--line);
}

@media (max-width:750px){

  .insight-grid{
    grid-template-columns:1fr;
  }

}

.insight-card{
  background:var(--bg);

  padding:38px;

  display:flex;

  flex-direction:column;
}

@media (max-width:600px){

  .insight-card{
    padding:30px 24px;
  }

}

.insight-meta{
  font-size:12.5px;

  color:var(--brass);

  letter-spacing:.03em;

  margin-bottom:14px;
}

.insight-card h3{
  font-size:21px;

  color:var(--text);

  margin-bottom:10px;
}

.insight-card p{
  color:var(--muted);

  font-size:14.5px;

  flex-grow:1;
}

.insight-card a{
  margin-top:18px;

  font-size:14px;

  color:var(--brass);

  display:inline-flex;

  border-bottom:1px solid transparent;

  transition:border-color .3s ease;
}

.insight-card a:hover{
  border-color:var(--brass);
}

.insight-empty{
  padding:60px 0;

  text-align:center;

  color:var(--muted-dim);

  font-size:14.5px;
}


/* =========================================================
   BRAND GALLERY
========================================================= */

.brand-gallery{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:14px;

  margin-top:8px;
}

.brand-gallery a{
  display:block;

  border-radius:12px;

  overflow:hidden;

  border:1px solid var(--line-strong);

  aspect-ratio:4/3;
}

.brand-gallery img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1);
}

.brand-gallery a:hover img{
  transform:scale(1.06);
}

@media (max-width:700px){

  .brand-gallery{
    grid-template-columns:repeat(2,1fr);

    gap:10px;
  }

}


/* =========================================================
   STAT STRIP
========================================================= */

.stat-strip{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);
}

@media (max-width:700px){

  .stat-strip{
    grid-template-columns:1fr 1fr;
  }

}

.stat-strip div{
  padding:34px 30px;

  border-left:1px solid var(--line);
}

.stat-strip div:first-child{
  border-left:none;
}

@media (max-width:700px){

  .stat-strip div{
    padding:28px 20px;
  }

  .stat-strip div:nth-child(2n+1){
    border-left:none;
  }

}

.stat-strip .num{
  font-family:'Fraunces',serif;

  font-size:32px;

  color:var(--brass);
}

.stat-strip .label{
  color:var(--muted);

  font-size:13.5px;

  margin-top:6px;
}


/* =========================================================
   EXTRA MOBILE SAFETY
========================================================= */

@media (max-width:700px){

  /*
    Prevent long text, buttons and grids
    from creating horizontal overflow.
  */

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

  .hero-actions{
    gap:12px;
  }

  .hero-actions .btn{
    width:100%;
  }

  .btn{
    min-height:48px;

    padding:13px 22px;
  }

  .page-banner{
    padding:145px 0 70px;
  }

  .page-banner p{
    font-size:15.5px;
  }

  .hero h1{
    font-size:clamp(38px,11vw,58px);
  }

  .hero-sub{
    font-size:15.5px;
  }

  .section-head h2{
    font-size:32px;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:390px){

  .wrap{
    padding-left:20px;
    padding-right:20px;
  }

  .logo-chip{
    padding:3px 7px;
  }

  .logo-chip img{
    height:24px;
  }

  .nav-toggle{
    width:42px;
    height:42px;
  }

  .mobile-menu .wrap{
    padding-top:16px;
  }

  .mobile-menu a{
    font-size:22px;

    padding:18px 0;
  }

  .page-banner{
    padding-top:135px;
  }

  .hero-actions .btn{
    width:100%;
  }

  .principle,
  .partner-card,
  .office-card,
  .insight-card{
    padding-left:20px;
    padding-right:20px;
  }

}

/* ============ floating WhatsApp chat button ============ */
.whatsapp-fab{
  position:fixed; right:24px; bottom:24px; z-index:400;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.whatsapp-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,0.4); }
.whatsapp-fab svg{ width:28px; height:28px; }
@media (max-width:600px){
  .whatsapp-fab{ right:16px; bottom:16px; width:52px; height:52px; }
  .whatsapp-fab svg{ width:25px; height:25px; }
}
.mobile-menu.open ~ .whatsapp-fab{ display:none; } /* avoid overlapping the open mobile nav */
 
/* ============ misc page-specific ============ */

@media (max-width:700px){ .stat-strip{ grid-template-columns:1fr 1fr; } }
.stat-strip div{ padding:34px 30px; border-left:1px solid var(--line); }
.stat-strip div:first-child{ border-left:none; }
@media (max-width:700px){ .stat-strip div:nth-child(2n+1){ border-left:none; } }
.stat-strip .num{ font-family:'Fraunces', serif; font-size:32px; color:var(--brass); }
.stat-strip .label{ color:var(--muted); font-size:13.5px; margin-top:6px; }