/* ==========================================================================
   Innerlightened — Design System v3
   Visual language matched to the Infine coaching theme reference:
   cream backgrounds, deep teal-green dark sections, teal→lime gradient
   accent, pill buttons, geometric sans type, "// label" eyebrows,
   rounded image collages, stat bands, split FAQ accordion.
   ========================================================================== */
:root{
  --cream:      #F3F1EA;   /* main page background */
  --cream-2:    #EBE8DE;   /* slightly deeper cream for alternating sections */
  --white:      #FFFFFF;

  --dark:       #0D2723;   /* deep teal-green, near-black — header/footer/dark bands */
  --dark-2:     #123832;   /* lifted dark teal for gradients within dark sections */

  --teal:       #14A88E;   /* gradient start */
  --lime:       #8BC53F;   /* gradient end */
  --gradient:   linear-gradient(95deg, var(--teal) 0%, var(--lime) 100%);

  --ink:        #16241F;   /* heading / body text on light bg */
  --muted:      #66716C;   /* secondary text on light bg */
  --on-dark:    #F3F1EA;   /* text on dark bg */
  --on-dark-muted: rgba(243,241,234,.68);

  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  28px;
  --radius-pill: 999px;

  --shadow-sm:  0 8px 24px rgba(13,39,35,.07);
  --shadow-md:  0 20px 46px rgba(13,39,35,.12);
  --shadow-lg:  0 30px 70px rgba(13,39,35,.22);

  --font-head: "Jost", "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", sans-serif;

  --container-max: 90%;
}

html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--muted);
  background: var(--cream);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

h1,h2,h3,h4,h5{
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{ color: var(--on-dark); }
p{ margin-bottom: 1rem; }
a{ color: inherit; text-decoration: none; }

.grad-text{
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--teal);
  text-transform: uppercase;
}
.eyebrow::before{ content:"//"; color: var(--lime); font-weight:800; }
.bg-dark .eyebrow{ color: var(--lime); }

.container-xl-custom{ max-width: var(--container-max); margin-inline:auto; padding-inline: 1.5rem; }
::selection{ background: var(--lime); color: var(--dark); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-grad{
  background: var(--gradient);
  border: none;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .92rem;
  padding: .95rem 1.9rem;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items:center; gap:.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-grad:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.04); color:#fff !important; }
.btn-grad .icon-circle{
  width: 1.7rem; height:1.7rem; border-radius:50%; background: rgba(255,255,255,.24);
  display:inline-flex; align-items:center; justify-content:center; font-size:.8rem;
}

.btn-outline-dark{
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink) !important;
  font-weight: 700; font-size: .92rem; padding: .9rem 1.85rem; border-radius: var(--radius-pill);
  display:inline-flex; align-items:center; gap:.6rem; transition: all .25s ease;
}
.btn-outline-dark:hover{ background: var(--ink); color: var(--cream) !important; transform: translateY(-2px); }

.btn-outline-cream{
  background: transparent; border: 1.5px solid rgba(243,241,234,.4); color: var(--on-dark) !important;
  font-weight: 700; font-size: .92rem; padding: .9rem 1.85rem; border-radius: var(--radius-pill);
  display:inline-flex; align-items:center; gap:.6rem; transition: all .25s ease;
}
.btn-outline-cream:hover{ background: var(--on-dark); color: var(--dark) !important; transform: translateY(-2px); }

.btn-sm{ padding:.6rem 1.3rem; font-size:.82rem; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.topbar{
  background: var(--dark); color: var(--on-dark-muted);
  font-size: .82rem; padding: .55rem 0;
}
.topbar a{ color: var(--lime); font-weight:700; }
.il-navbar{
  background: var(--cream);
  padding: 1.1rem 0;
  transition: box-shadow .25s ease, padding .25s ease;
}
.il-navbar.scrolled{ box-shadow: var(--shadow-sm); padding: .7rem 0; }
.il-brand{
  font-family: var(--font-head); font-weight:600; font-size:1.5rem; color: var(--ink) !important;
  display:flex; align-items:center; gap:.5rem;
}
.il-brand .brand-mark{
  width:2.1rem; height:2.1rem; border-radius: 8px; background: var(--gradient);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1rem;
}
.il-navbar .nav-link{
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  color: var(--ink) !important; padding: .5rem 1rem !important; opacity: .82;
}
.il-navbar .nav-link.active, .il-navbar .nav-link:hover{ opacity:1; color: var(--teal) !important; }
.nav-phone{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink); font-size:.95rem; }
.nav-phone .ph-icon{
  width:2.4rem; height:2.4rem; border-radius:50%; background: var(--cream-2);
  display:flex; align-items:center; justify-content:center; color: var(--teal);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-wrap{ padding: 1.4rem 0 0; }
.hero-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  min-height: 480px; display:flex; align-items:flex-end;
  background: var(--dark);
}
.hero-card img.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.hero-card::after{
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(100deg, rgba(13,39,35,.92) 0%, rgba(13,39,35,.65) 40%, rgba(13,39,35,.15) 75%);
}
.hero-card-inner{ position:relative; z-index:3; padding: 3.2rem 3rem; max-width: 40rem; }
.hero-card h1{ color:#fff; font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 1rem; }
.hero-card p.lead{ color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 34ch; }
.breadcrumb-pill{ font-size:.82rem; font-weight:700; letter-spacing:.04em; color: rgba(255,255,255,.7); text-transform:uppercase; }
.breadcrumb-pill span{ color: var(--lime); }

/* Page header variant (About/Workshops/Blog/Contact interior pages) */
.page-hero .hero-card{ min-height: 360px; }
.page-hero h1{ font-size: clamp(2.4rem, 4.4vw, 3.6rem); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section{ padding: 6rem 0; }
.section-sm{ padding: 3.5rem 0; }
@media (max-width: 767px){ .section{ padding: 3.8rem 0; } }
.bg-dark{ background: linear-gradient(170deg, var(--dark) 0%, var(--dark-2) 100%); color: var(--on-dark-muted); position:relative; overflow:hidden; }
.bg-dark::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background: radial-gradient(50% 60% at 90% 0%, rgba(139,197,63,.10), transparent 60%),
              radial-gradient(40% 50% at 0% 100%, rgba(20,168,142,.14), transparent 60%);
}
.bg-dark > *{ position:relative; z-index:1; }
.bg-white-card{ background: var(--white); border-radius: var(--radius-lg); padding: 3.2rem; box-shadow: var(--shadow-sm); }
.bg-cream-2{ background: var(--cream-2); }

.section-head-lg{ font-size: clamp(1.9rem, 3vw, 2.6rem); }

/* ==========================================================================
   About / Collage
   ========================================================================== */
.collage{ position:relative; padding: 1.5rem 2.2rem 2.2rem 0; }
.collage .img-main{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio: 3/3.6; }
.collage .img-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.collage .img-float{
  position:absolute; right:0; bottom:-1.2rem; width:48%; border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-lg); border: 5px solid var(--cream); aspect-ratio: 4/3.4;
}
.collage .img-float img{ width:100%; height:100%; object-fit:cover; display:block; }
.collage .badge-exp{
  position:absolute; left:0; top:1rem; z-index:4;
  background: var(--gradient); color:#fff; border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-md); max-width: 8.5rem;
}
.collage .badge-exp .num{ font-family: var(--font-head); font-size:1.7rem; font-weight:700; line-height:1; }
.collage .badge-exp .lbl{ font-size:.72rem; margin-top:.2rem; opacity:.92; }
.collage .side-tag{
  position:absolute; left:-1.1rem; top:50%; transform: translateY(-50%) rotate(-90deg);
  transform-origin: center; background: var(--white); border-radius: var(--radius-sm);
  padding: .5rem 1rem; font-size:.72rem; font-weight:700; color: var(--ink); box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.check-list{ list-style:none; padding:0; margin:0 0 1.5rem; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; font-weight:600; color: var(--ink); }
.bg-dark .check-list li{ color: var(--on-dark); }
.check-list .chk{
  flex:0 0 auto; width:1.35rem; height:1.35rem; border-radius:50%; background: var(--gradient);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; margin-top:.1rem;
}

/* ==========================================================================
   Mission / Vision / Value list (Our Approach section)
   ========================================================================== */
.mvv-item{ display:flex; gap:1rem; padding: 1rem 0; border-top: 1px solid rgba(22,36,31,.08); }
.mvv-item:first-child{ border-top:none; }
.mvv-num{
  flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:50%; background: var(--cream-2);
  color: var(--teal); display:flex; align-items:center; justify-content:center;
}
.mvv-item h5{ font-size:1.05rem; margin-bottom:.25rem; }
.mvv-item p{ font-size:.92rem; margin-bottom:0; }

/* ==========================================================================
   Stat band (dark, 2x2 or 4-across)
   ========================================================================== */
.stat-tile .num{ font-family: var(--font-head); font-size: 2.4rem; font-weight:700; color: var(--on-dark); }
.stat-tile .num .accent{ color: var(--lime); }
.stat-tile .lbl{ font-size:.85rem; color: var(--on-dark-muted); margin-top:.3rem; }
.stat-tile .desc{ font-size:.82rem; color: var(--on-dark-muted); opacity:.75; margin-top:.2rem; }

/* ==========================================================================
   Progress bars (Why Choose Us)
   ========================================================================== */
.skillbar{ margin-bottom: 1.4rem; }
.skillbar .row-label{ display:flex; justify-content:space-between; font-weight:700; color: var(--ink); font-size:.92rem; margin-bottom:.5rem; }
.skillbar .track{ height: 9px; background: var(--cream-2); border-radius: var(--radius-pill); overflow:hidden; }
.skillbar .fill{ height:100%; border-radius: var(--radius-pill); background: var(--gradient); }

/* ==========================================================================
   Cards: services / journeys / guides
   ========================================================================== */
.icon-badge{
  width: 3.4rem; height:3.4rem; border-radius: 14px; background: var(--gradient);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.35rem; flex:0 0 auto;
}
.service-card{
  background: var(--white); border-radius: var(--radius); padding: 2.1rem;
  height:100%; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.service-card h5{ margin: 1.2rem 0 .5rem; font-size: 1.15rem; }
.service-card p{ font-size:.92rem; margin-bottom:0; }

.service-card.on-dark{ background: rgba(255,255,255,.05); border: 1px solid rgba(243,241,234,.12); }
.service-card.on-dark h5{ color: var(--on-dark); }
.service-card.on-dark p{ color: var(--on-dark-muted); }

.journey-card{
  background:#fff; border-radius: var(--radius); padding: 2.4rem 2.1rem; height:100%;
  box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; position:relative;
}
.journey-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.journey-card .journey-num{ font-family:var(--font-head); font-size:2.2rem; font-weight:700; color: var(--cream-2); }
.journey-card.is-featured{ background: linear-gradient(165deg, var(--dark), var(--dark-2)); }
.journey-card.is-featured h4,.journey-card.is-featured h5{ color:#fff; }
.journey-card.is-featured p{ color: var(--on-dark-muted); }
.journey-card.is-featured .journey-num{ color: rgba(243,241,234,.16); }

/* Pillar / guide cards */
.pillar-card{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); height:100%; transition: transform .3s ease, box-shadow .3s ease; }
.pillar-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pillar-card .pillar-head{ padding: 1.7rem 1.9rem; background: linear-gradient(165deg, var(--dark), var(--dark-2)); }
.pillar-card .pillar-head .eyebrow{ margin-bottom:.4rem; }
.pillar-card .pillar-head h4{ color:#fff; margin-bottom:.5rem; }
.pillar-card .pillar-head p{ color: var(--on-dark-muted); font-size:.9rem; margin-bottom:0; }
.pillar-card .pillar-body{ padding: 1.7rem 1.9rem; }
.pillar-card ul{ list-style:none; padding:0; margin:0; }
.pillar-card ul li{ padding:.6rem 0; border-bottom:1px dashed rgba(22,36,31,.12); font-size:.92rem; }
.pillar-card ul li:last-child{ border-bottom:none; }
.pillar-card .skill-name{ font-weight:700; color:var(--ink); display:block; }
.pillar-card .skill-tag{ color: var(--muted); font-style:italic; font-size:.86rem; }
.pillar-card .pillar-footer{ padding: 1.2rem 1.9rem 1.7rem; border-top:1px solid rgba(22,36,31,.08); display:flex; align-items:center; gap:1rem; }

.guide-card{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); height:100%; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease; }
.guide-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.guide-card .guide-cover{ background: var(--dark); padding: 1.4rem 1.4rem 0; }
.guide-card .guide-cover img{ width:100%; border-radius: 8px; box-shadow: 0 14px 26px rgba(0,0,0,.35); display:block; }
.guide-card .guide-body{ padding: 1.5rem 1.4rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.guide-card .guide-body p{ font-size:.9rem; }

.post-card{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); height:100%; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease; }
.post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card .post-thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--dark); }
.post-card .post-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.post-card:hover .post-thumb img{ transform: scale(1.05); }
.post-card .post-body{ padding:1.6rem; flex:1; display:flex; flex-direction:column; }
.post-meta{ font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color: var(--teal); font-weight:800; }
.post-card h3{ font-size:1.2rem; }
.post-card .read-more{ margin-top:auto; font-size:.82rem; font-weight:800; color: var(--ink); display:inline-flex; align-items:center; gap:.5rem; }

/* ==========================================================================
   Video / CTA band
   ========================================================================== */
.video-band{
  border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--dark) 0%, var(--dark-2) 60%, #1c4a41 100%);
  padding: 3.5rem 3rem; position:relative; overflow:hidden;
}
.video-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(45% 70% at 85% 30%, rgba(139,197,63,.16), transparent 60%); }
.play-btn{
  width: 4.2rem; height:4.2rem; border-radius:50%; background: var(--gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow: var(--shadow-md);
  flex:0 0 auto;
}

/* ==========================================================================
   Testimonials (dark band, big photo + quote)
   ========================================================================== */
.testi-photo{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3/3.4; }
.testi-photo img{ width:100%; height:100%; object-fit:cover; }
.testi-quote-mark{ font-family: var(--font-head); font-size: 3rem; color: var(--lime); line-height:1; }
.testi-text{ color: var(--on-dark); font-size:1.2rem; line-height:1.6; }
.testi-name{ color:#fff; font-weight:700; margin-bottom:0; }
.testi-role{ color: var(--on-dark-muted); font-size:.85rem; }
.testi-nav-btn{
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid rgba(243,241,234,.3); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; transition: all .2s ease;
}
.testi-nav-btn:hover{ background: var(--gradient); border-color:transparent; }
.quote-card{ background:#fff; border-radius: var(--radius); padding: 2.3rem; box-shadow: var(--shadow-sm); height:100%; }
.quote-card .qmark{ font-family:var(--font-head); font-size:2.4rem; color: var(--lime); line-height:.6; display:block; margin-bottom:.6rem; }
.quote-card p.quote-text{ color: var(--ink); font-size:1.02rem; }
.quote-attr{ font-weight:700; color: var(--ink); font-size:.9rem; }

/* ==========================================================================
   FAQ split accordion
   ========================================================================== */
.faq-item{ border-radius: var(--radius); margin-bottom: .9rem; overflow:hidden; border: 1px solid rgba(22,36,31,.1); background:#fff; }
.faq-item .faq-q{
  width:100%; text-align:left; background:none; border:none; padding: 1.15rem 1.4rem;
  font-weight:700; color: var(--ink); display:flex; justify-content:space-between; align-items:center; font-size:.98rem;
}
.faq-item .faq-q .plus{
  width:1.7rem; height:1.7rem; border-radius:50%; border:1.5px solid rgba(22,36,31,.25);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition: all .2s ease;
}
.faq-item.active{ background: var(--gradient); border-color:transparent; box-shadow: var(--shadow-md); }
.faq-item.active .faq-q{ color:#fff; }
.faq-item.active .faq-q .plus{ border-color: rgba(255,255,255,.6); color:#fff; }
.faq-body{ padding: 0 1.4rem 1.3rem; font-size:.92rem; }
.faq-item.active .faq-body{ color: rgba(255,255,255,.92); }
.faq-item:not(.active) .faq-body{ display:none; }

.faq-help-card{
  background:#fff; border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:.8rem;
}
.faq-help-card .avatars{ display:flex; }
.faq-help-card .avatars img{ width:2.2rem; height:2.2rem; border-radius:50%; border:2px solid #fff; margin-right:-.6rem; object-fit:cover; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-form-card{ background:#fff; border-radius: var(--radius-lg); padding: 2.6rem; box-shadow: var(--shadow-md); }
.contact-form-card .form-label{ font-size:.82rem; font-weight:700; color: var(--ink); margin-bottom:.3rem; }
.contact-form-card .form-control, .contact-form-card .form-select, .contact-form-card textarea{
  border: none; border-bottom: 1.5px solid rgba(22,36,31,.15); border-radius:0; padding: .65rem .2rem;
  background: transparent;
}
.contact-form-card .form-control:focus, .contact-form-card .form-select:focus{ border-color: var(--teal); box-shadow:none; background:transparent; }

.contact-info-item{ display:flex; gap:1.1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(22,36,31,.08); }
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-item .ci-icon{
  width:3rem; height:3rem; border-radius:50%; background: var(--gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.contact-info-item h5{ font-size:1.02rem; margin-bottom:.2rem; }
.contact-info-item p{ font-size:.86rem; margin-bottom:.3rem; }
.contact-info-item a{ color: var(--teal); font-weight:700; }

.booking-panel{ background:#fff; border-radius: var(--radius-lg); padding: 2.6rem; box-shadow: var(--shadow-md); }
.booking-panel .form-label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--muted); }
.booking-panel .form-control,.booking-panel .form-select,.booking-panel textarea{
  border-radius: var(--radius-sm); border:1.5px solid rgba(22,36,31,.14); padding:.75rem .9rem; background: var(--cream);
}
.booking-panel .form-control:focus,.booking-panel .form-select:focus{ border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(20,168,142,.15); background:#fff; }
.step-badge{ background: var(--gradient); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.4rem .9rem; border-radius: var(--radius-pill); display:inline-block; }
.form-check-input:checked{ background-color: var(--teal); border-color: var(--teal); }

/* ==========================================================================
   Footer
   ========================================================================== */
.il-footer{ background: linear-gradient(170deg, var(--dark), var(--dark-2)); color: var(--on-dark-muted); padding: 4.5rem 0 1.6rem; position:relative; overflow:hidden; }
.il-footer::before{ content:""; position:absolute; inset:0; background: radial-gradient(50% 60% at 100% 0%, rgba(139,197,63,.12), transparent 60%); pointer-events:none; }
.il-footer > *{ position:relative; z-index:1; }
.il-footer h2{ color:#fff; font-size: clamp(1.8rem,3vw,2.4rem); }
.il-footer h5{ color:#fff; font-weight:700; font-size:1rem; }
.il-footer a{ color: var(--on-dark-muted); }
.il-footer a:hover{ color: var(--lime); }
.il-footer .footer-links li{ padding:.3rem 0; }
.social-ring{ width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid rgba(243,241,234,.28); display:inline-flex; align-items:center; justify-content:center; transition: all .25s ease; }
.social-ring:hover{ background: var(--gradient); border-color:transparent; }
.footer-bottom{ border-top:1px solid rgba(243,241,234,.14); margin-top:2.8rem; padding-top:1.4rem; font-size:.82rem; opacity:.6; }

/* ==========================================================================
   Utility
   ========================================================================== */
.rounded-il{ border-radius: var(--radius); }
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.text-ink{ color: var(--ink) !important; }
.text-teal{ color: var(--teal) !important; }
.badge-soft{ display:inline-block; padding:.4rem .95rem; border-radius: var(--radius-pill); background: rgba(20,168,142,.1); color: var(--teal); font-size:.76rem; font-weight:800; }