/* ============================================================
   COMPONENTS — PhaseLab Instrument
   Reusable UI atoms. All values reference tokens.
   ============================================================

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────
    1.  BUTTONS          .btn-pl  --primary --secondary --gold
                                  --outline --outline-gold --ghost
                                  --sm --lg --block
    2.  SECTION TITLE    .section-title  .section-lead
                         .section-subtitle  .section-header
    3.  CARDS            .card-pl  --dark --split --surface
    4.  BADGE / PILL     .badge-pl  --blue --gold --grey
    5.  ICON CIRCLE      .icon-circle  --blue --outline --gold
    6.  NUMBERED ITEM    .numbered-item
    7.  FEATURE ITEM     .feature-item  --light
    8.  APPLICATION ITEM .app-item
    9.  IMAGE CARD       .img-card  --banner --tall --flush
   10.  CARD NUM         .card-num
   11.  PARTNERS CARD    .partners-card
   12.  SITE FOOTER      .site-footer  .footer-card  .footer-bar
   13.  SPECS TABLE      .specs-table
   14.  ICON CARD        .icon-card
   15.  INFO CARD        .info-card  --blue-border --gold-border --tinted
   16.  TEAM CARD        .team-card
   17.  FAQ ACCORDION    .faq-item  --collapsed
   18.  CONTACT ROW      .contact-row  --muted
   19.  RESOURCE TILE    .resource-tile  --light --dark --gold --surface
   20.  SOLUTION CARD    .solution-card
   21.  PARTNER LOGOS    .partner-logos  .partner-logo
   22.  HERO STATS       .hero-stats / .hero-stat
   23.  CONTACT MODAL    .contact-modal  __head  __icon-wrap  __title  __tabs  __tab
   ─────────────────────────────────────────────────────────
   ============================================================ */


/* ── BUTTONS ────────────────────────────────────────────────────
   Base class: .btn-pl
   Modifiers:  --primary  --secondary  --gold
               --outline  --outline-gold  --ghost
   Size mods:  --sm  --lg
   Usage: <a href="#" class="btn-pl btn-pl--primary">Label</a>
   ─────────────────────────────────────────────────────────────── */

.btn-pl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  line-height: 1;
  padding: 0.65rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color            var(--transition-fast),
              border-color     var(--transition-fast),
              box-shadow       var(--transition-fast);
}
.btn-pl:hover { text-decoration: none; }

/* Filled — primary blue */
.btn-pl--primary {
  background-color: var(--color-brand);
  border-color:     var(--color-brand);
  color: var(--text-on-deep);
}
.btn-pl--primary:hover {
  background-color: var(--color-brand-hover);
  border-color:     var(--color-brand-hover);
  color: var(--text-on-deep);
}

/* Filled — secondary (mid blue) */
.btn-pl--secondary {
  background-color: var(--blue-500);
  border-color:     var(--blue-500);
  color: var(--text-on-deep);
}
.btn-pl--secondary:hover {
  background-color: var(--blue-600);
  border-color:     var(--blue-600);
  color: var(--text-on-deep);
}

/* Filled — gold accent */
.btn-pl--gold {
  background-color: var(--color-accent);
  border-color:     var(--color-accent);
  color: var(--text-on-deep);
}
.btn-pl--gold:hover {
  background-color: var(--color-accent-hover);
  border-color:     var(--color-accent-hover);
  color: var(--text-on-deep);
}

/* Outline — blue */
.btn-pl--outline {
  background-color: transparent;
  border-color:     var(--color-brand);
  color:            var(--color-brand);
}
.btn-pl--outline:hover {
  background-color: var(--color-brand);
  color: var(--text-on-deep);
}

/* Outline — gold */
.btn-pl--outline-gold {
  background-color: var(--gold-100);
  border-color:     var(--color-accent);
  color:            var(--color-accent);
}
.btn-pl--outline-gold:hover {
  background-color: var(--color-accent);
  color: var(--text-on-deep);
}

/* Outline — on dark background (white outline) */
.btn-pl--outline-light {
  background-color: transparent;
  border-color:     rgba(255,255,255,0.55);
  color:            var(--text-on-deep);
}
.btn-pl--outline-light:hover {
  background-color: rgba(255,255,255,0.12);
  border-color:     rgba(255,255,255,0.9);
  color: var(--text-on-deep);
}

/* Ghost — inline CTA with arrow, no box */
.btn-pl--ghost {
  background: none;
  border-color: transparent;
  color: var(--color-brand);
  padding-left: 0;
  padding-right: 0;
  font-weight: var(--fw-semi);
}
.btn-pl--ghost::after { content: ' →'; }
.btn-pl--ghost:hover  { color: var(--color-brand-hover); text-decoration: underline; }

/* Ghost on dark */
.btn-pl--ghost-light {
  background: none;
  border-color: transparent;
  color: var(--text-on-deep);
  padding-left: 0;
  padding-right: 0;
  font-weight: var(--fw-semi);
  opacity: 0.85;
}
.btn-pl--ghost-light::after { content: ' →'; }
.btn-pl--ghost-light:hover  { opacity: 1; text-decoration: underline; color: var(--text-on-deep); }

/* Size modifiers */
.btn-pl--sm {
  font-size: var(--text-xs);
  padding: 0.4rem 1rem;
}
.btn-pl--lg {
  font-size: var(--text-base);
  padding: 0.85rem 2.2rem;
}

/* Full-width block button */
.btn-pl--block { display: block; width: 100%; }

/* Pill shape (used in navbar) */
.btn-pl--pill { border-radius: var(--radius-pill); }


/* ── SECTION TITLE ──────────────────────────────────────────────
   Usage:
     <div class="section-header">
       <h2 class="section-title">Main <span class="accent-gold">domains</span></h2>
       <p class="section-lead">Optional subtitle text.</p>
     </div>
   ─────────────────────────────────────────────────────────────── */

.section-header {
  margin-bottom: var(--sp-12);
}
.section-header--center {
  text-align: center;
  /*max-width: 680px;*/
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp-10);
}

.section-title {
  font-size: var(--text-2xl);
  color: var(--text-heading);
  margin-bottom: var(--sp-3);
  font-weight: var(--fw-bold);
}

.section-lead {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--line-height);
  margin-bottom: 0;
}

/* Section title on deep (dark) background */
.section-title--on-deep { color: var(--text-on-deep); }
.section-lead--on-deep  { color: rgba(255,255,255,0.72); }


/* ── CARDS ──────────────────────────────────────────────────────
   Base: .card-pl
   Variants: --dark  --surface
   Usage:
     <div class="card-pl">
       <img ...>
       <div class="card-pl__body"> ... </div>
     </div>
   ─────────────────────────────────────────────────────────────── */

.card-pl {
  background-color: #ffffff;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-pl__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.card-pl__body {
  padding: var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-pl__title {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-3);
}
.card-pl__text {
  font-size: var(--text-sm);
  color: var(--text-body);
  flex: 1;
  margin-bottom: var(--sp-4);
}
.card-pl__footer {
  margin-top: auto;
}

/* Dark variant — for "academic" style feature cards */
.card-pl--dark {
  background-color: var(--bg-deep);
  box-shadow: none;
}
.card-pl--dark .card-pl__title { color: var(--text-on-deep); }
.card-pl--dark .card-pl__text  { color: rgba(255,255,255,0.75); }

/* Split variant — blue header / white body */
.card-pl--split {
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.card-pl--split .card-pl__header {
  background-color: var(--bg-deep);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.card-pl--split .card-pl__header .card-num {
  margin-bottom: 0;
  flex-shrink: 0;
}
.card-pl--split .card-pl__header .card-pl__title {
  color: var(--text-on-deep);
  margin-bottom: 0;
}
.card-pl--split .card-pl__body {
  background-color: #ffffff;
  padding: var(--sp-6);
  flex: 1;
}
.card-pl--split .card-pl__text { color: var(--text-body); }

/* Surface variant — greyed card (team, secondary info) */
.card-pl--surface {
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

/* Card intro paragraph + bullet list — shared card sub-elements */
.card-pl-intro {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin-bottom: var(--sp-3);
}
.card-pl__bullets {
  list-style: disc;
  padding-left: var(--sp-6);
  margin: 0;
}
.card-pl__bullets li {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--sp-1) 0;
}


/* ── BADGE / PILL ───────────────────────────────────────────────
   Usage: <span class="badge-pl badge-pl--blue">Health</span>
   ─────────────────────────────────────────────────────────────── */

.badge-pl {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.badge-pl--blue  { background-color: var(--blue-100);  color: var(--blue-600);  }
.badge-pl--blue-solid { background-color: var(--color-brand); color: #fff; }
.badge-pl--gold  { background-color: var(--gold-100);  color: var(--gold-800);  }
.badge-pl--gold-solid { background-color: var(--color-accent); color: #fff; }
.badge-pl--grey  { background-color: var(--grey-200);  color: var(--grey-700);  }


/* ── ICON CIRCLE ────────────────────────────────────────────────
   Container for Bootstrap Icons in circular frames.
   Usage:
     <div class="icon-circle icon-circle--outline">
       <i class="bi bi-graph-up-arrow"></i>
     </div>
   ─────────────────────────────────────────────────────────────── */

.icon-circle {
  width:  60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Filled blue — for light bg sections */
.icon-circle--blue {
  background-color: var(--blue-100);
  color: var(--color-brand);
}

/* Outline — for dark (deep) backgrounds */
.icon-circle--outline {
  background-color: transparent;
  border: 2px solid var(--blue-400);
  color: var(--blue-400);
}

/* Gold — for applications section etc. */
.icon-circle--gold {
  background-color: var(--color-accent);
  color: #fff;
}


/* ── NUMBERED ITEM ──────────────────────────────────────────────
   Usage:
     <div class="numbered-item">
       <div class="numbered-item__num">1</div>
       <div class="numbered-item__body">
         <h5>Title</h5><p>Text</p>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────── */

.numbered-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.numbered-item__num {
  flex-shrink: 0;
  width:  32px;
  height: 32px;
  background-color: var(--blue-100);
  color: var(--text-heading);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  margin-top: -0.2rem;
}
.numbered-item__body h5 {
  font-size: var(--text-base);
  color: var(--text-heading);
  margin-bottom: var(--sp-2);
}
.numbered-item__body p,
.numbered-item__body ul {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin-bottom: 0;
}


/* ── FEATURE ITEM (horizontal, icon + text) ─────────────────────
   Used in features banner (dark background)
   Usage:
     <div class="feature-item">
       <div class="icon-circle icon-circle--outline"> ... </div>
       <div class="feature-item__body"> ... </div>
     </div>
   ─────────────────────────────────────────────────────────────── */

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.feature-item__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--text-on-deep);
  margin-bottom: var(--sp-2);
}
.feature-item__text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.72);
  margin-bottom: 0;
}


/* ── APPLICATION ITEM (icon + text, horizontal row) ─────────────
   Used in "Examples of SPR Applications"
   ─────────────────────────────────────────────────────────────── */

.app-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.app-item__body h6 {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-1);
}
.app-item__body p {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin-bottom: 0;
}


/* Feature item on a light background (overrides dark defaults) */
.feature-item--light .feature-item__title { color: var(--text-heading); }
.feature-item--light .feature-item__text  { color: var(--text-body); }
.feature-item--light .icon-circle--outline {
  border-color: var(--color-brand);
  color: var(--color-brand);
}


/* ── IMAGE CARD ─────────────────────────────────────────────────
   Universal wrapper for any image displayed as a rounded card.
   Usage: <div class="img-card"><img src="..." /></div>
   ─────────────────────────────────────────────────────────────── */

.img-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.img-card img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Banner variant — fixed height crop, for full-width section images */
.img-card--banner img {
  height: 360px;
}

/* Flush variant — removes border-radius (used inside cards) */
.img-card--flush {
  border-radius: 0;
  box-shadow: none;
}

/* Tall variant — for mosaic/side-by-side image grids */
.img-card--tall {
  height: 100%;
}
.img-card--tall img {
  height: 100%;
  min-height: 160px;
}


/* ── CARD NUM (numbered badge inside dark cards) ────────────────
   Usage: <div class="card-num">1</div>
   ─────────────────────────────────────────────────────────────── */

.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  30px;
  height: 30px;
  background-color: var(--blue-500);
  color: #fff;
  border-radius: 50%;
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
}


/* ── PARTNERS CARD (section 10) ─────────────────────────────────
   Usage: <div class="partners-card"> inside section--gold-tint
   ─────────────────────────────────────────────────────────────── */

.partners-card {
  background-color: var(--gold-100);
  border: 2px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10);
  text-align: center;
}
.partners-card__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-6);
}
.partners-card__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.partners-card__logos img {
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: none;
}


/* ── SITE FOOTER (section 11) ───────────────────────────────────
   Outer: <footer class="site-footer">
   Inner card: .footer-card  (dark blue border, 3 cols)
   Bottom bar: .footer-bar
   ─────────────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--blue-100);
  padding: var(--sp-10) 0 var(--sp-6);
}

.footer-card {
  border: 2px solid var(--bg-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.footer-card__col {
  padding: var(--sp-8);
}
.footer-card__col--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-card__col--mid {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.footer-card__col--right {
  background-color: var(--blue-50);
}

.footer-card__logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--sp-5);
}
.footer-card__heading {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-4);
}
.footer-card__nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-card__nav li + li {
  margin-top: var(--sp-2);
}
.footer-card__nav a {
  color: var(--text-body);
  text-decoration: none;
  font-size: var(--text-sm);
}
.footer-card__nav a:hover {
  color: var(--color-brand);
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.footer-bar__links {
  display: flex;
  gap: var(--sp-5);
}
.footer-bar__links a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer-bar__links a:hover {
  color: var(--text-body);
}


/* ── SPECS TABLE ─────────────────────────────────────────────────
   Usage:
     <p class="specs-table__title">SPR's Specifications</p>
     <table class="specs-table"><tbody>
       <tr><td>Analyse</td><td>Real time</td></tr>
     </tbody></table>
   ─────────────────────────────────────────────────────────────── */

.specs-table__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.01em;
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
}
.specs-table tr {
  border-bottom: 1px solid var(--color-border);
}
.specs-table tr:last-child { border-bottom: none; }
.specs-table td {
  padding: var(--sp-3) 0;
  font-size: var(--text-sm);
  color: var(--text-body);
  vertical-align: middle;
}
.specs-table td:first-child {
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  width: 55%;
}
.specs-table td:last-child { text-align: right; }


/* ── ICON CARD ───────────────────────────────────────────────────
   Component card: square dark-blue icon + title header, body text.
   Usage:
     <div class="icon-card">
       <div class="icon-card__header">
         <div class="icon-card__icon"><i class="ph ph-cpu"></i></div>
         <h5 class="icon-card__title">SPR chips</h5>
       </div>
       <div class="icon-card__body"> <p>...</p> </div>
     </div>
   ─────────────────────────────────────────────────────────────── */

.icon-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.icon-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.icon-card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--bg-deep);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.icon-card__title {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin: 0;
}
.icon-card__body { flex: 1; }
.icon-card__body h6 {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin: var(--sp-4) 0 var(--sp-2);
}
.icon-card__body p {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin-bottom: var(--sp-2);
}


/* ── INFO CARD ───────────────────────────────────────────────────
   Bordered info card with 3 variant styles.
   Variants: --blue-border  --gold-border  --tinted
   Usage:
     <div class="info-card info-card--blue-border">
       <h5 class="info-card__title">...</h5>
       <p class="info-card__body">...</p>
       <div class="info-card__footer"><a ...></div>
     </div>
   ─────────────────────────────────────────────────────────────── */

.info-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.info-card--blue-border  { border: 1.5px solid var(--color-brand); }
.info-card--gold-border  { border: 1.5px solid var(--gold-500); }
.info-card--tinted {
  background: var(--blue-50);
  border: 1.5px dashed var(--blue-200);
}
.info-card__title {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-4);
}
.info-card__body {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--line-height);
  flex: 1;
  margin-bottom: var(--sp-5);
}
.info-card__footer { margin-top: auto; }


/* ── TEAM CARD ───────────────────────────────────────────────────
   Usage:
     <div class="team-card">
       <img class="team-card__avatar" src="..." alt="Name" />
       <p class="team-card__name">Name</p>
       <p class="team-card__role">Role</p>
       <p class="team-card__bio">Bio text.</p>
     </div>
   ─────────────────────────────────────────────────────────────── */

.team-card {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
}
.team-card__avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin: 0 auto var(--sp-4);
  display: block;
}
.team-card__name {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-1);
}
.team-card__role {
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-3);
}
.team-card__bio {
  font-size: var(--text-xs);
  color: var(--text-body);
  line-height: 1.55;
}


/* ── FAQ ACCORDION ───────────────────────────────────────────────
   Usage:
     <div class="faq-item">
       <button class="faq-item__trigger">Question ?
         <i class="ph ph-caret-up"></i>
       </button>
       <div class="faq-item__body"><p>Answer.</p></div>
     </div>
     Add .faq-item--collapsed to hide body + rotate icon.
   ─────────────────────────────────────────────────────────────── */

.faq-item {
  background: var(--blue-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  text-align: left;
  font-family: var(--font-main);
  gap: var(--sp-4);
}
.faq-item__trigger i { font-size: 1rem; color: var(--text-muted); flex-shrink: 0; }
.faq-item__body {
  background: var(--blue-50);
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--text-sm);
  color: var(--text-heading);
  line-height: var(--line-height);
}
.faq-item__body p + p { margin-top: var(--sp-3); }
.faq-item--collapsed .faq-item__body { display: none; }
.faq-item--collapsed .faq-item__trigger i { transform: rotate(180deg); }


/* ── CONTACT ROW ─────────────────────────────────────────────────
   Usage:
     <div class="contact-row">
       <div class="contact-row__icon"><i class="ph ph-envelope"></i></div>
       <div>
         <p class="contact-row__label">Mail</p>
         <p class="contact-row__value">contact@example.com</p>
       </div>
     </div>
   Add .contact-row--muted for greyed-out state.
   ─────────────────────────────────────────────────────────────── */

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.contact-row:last-child { border-bottom: none; }
.contact-row--muted { opacity: 0.35; }
.contact-row__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-heading);
  flex-shrink: 0;
}
.contact-row__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-1);
}
.contact-row__value {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin: 0;
}


/* ── RESOURCE TILE ───────────────────────────────────────────────
   Document / section tile for member areas.
   Variants: --light  --dark  --gold  --surface
   Usage:
     <a href="#" class="resource-tile resource-tile--dark">
       <div class="resource-tile__icon"><i class="ph ph-file-text"></i></div>
       <span class="resource-tile__label">Section 2</span>
     </a>
   ─────────────────────────────────────────────────────────────── */

.resource-tile {
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  text-align: center;
}
.resource-tile:hover { opacity: 0.85; text-decoration: none; }
.resource-tile--light   { background: var(--blue-100); }
.resource-tile--dark    { background: var(--bg-deep); }
.resource-tile--gold    { background: var(--color-accent); }
.resource-tile--surface {
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.resource-tile__icon {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-heading);
}
.resource-tile--surface .resource-tile__icon { background: var(--blue-100); }
.resource-tile__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
.resource-tile--dark .resource-tile__label,
.resource-tile--gold .resource-tile__label { color: #fff; }


/* ── SOLUTION CARD ───────────────────────────────────────────────
   Two-panel rounded card: blue-tinted text side + light icon side.
   Usage:
     <div class="solution-card row g-0">
       <div class="col-lg-6 solution-card__left"> ... </div>
       <div class="col-lg-6 solution-card__right"> ... </div>
     </div>
   ─────────────────────────────────────────────────────────────── */

.solution-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.solution-card__left {
  background-color: var(--blue-100);
  padding: var(--sp-12) var(--sp-10);
}
.solution-card__right {
  background-color: var(--grey-50);
  padding: var(--sp-12) var(--sp-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-4);
}
.solution-card__icon {
  font-size: 4rem;
  color: var(--color-brand);
  opacity: 0.2;
  line-height: 1;
}
.solution-card__link-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}


/* ── PARTNER LOGOS ───────────────────────────────────────────────
   Usage:
     <div class="partner-logos">
       <img class="partner-logo" src="..." alt="..." />
     </div>
   ─────────────────────────────────────────────────────────────── */

.partner-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.partner-logo {
  opacity: 0.45;
  transition: opacity var(--transition);
}
.partner-logo:hover { opacity: 0.85; }


/* ── SECTION SUBTITLE ────────────────────────────────────────────
   Optional h4-level subtitle sitting below a section-title.
   Usage:
     <h2 class="section-title">Contact <span class="accent-blue">Us</span></h2>
     <p class="section-subtitle">Nunc id massa vitae dolor maximus</p>
   ─────────────────────────────────────────────────────────────── */

.section-subtitle {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: var(--sp-4);
}


/* ── SECTION NAVIGATOR strip ─────────────────────────────────────
   Grey band with 3 anchor links mapping to the 3 feature sections.
   Used on ipso-lab.html and index.html.
   ─────────────────────────────────────────────────────────────── */

.section-nav {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-top: 0;
  padding-bottom: 0;
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-10);
}

.section-nav__item {
  display: block;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.section-nav__item:hover {
  background: var(--blue-50);
  text-decoration: none;
}

.section-nav__col--divided {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .section-nav__col--divided {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
}

.section-nav__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  color: var(--text-heading);
  margin-bottom: var(--sp-1);
}

.section-nav__sub {
  font-size: var(--text-base);
  color: var(--text-muted);
}


/* ── FEATURE SECTION typography ──────────────────────────────────
   #precision, #modular, #usability — shared on ipso-lab.html
   and index.html.
   ─────────────────────────────────────────────────────────────── */

#precision .section-title,
#modular .section-title,
#usability .section-title,
#precision h3,
#modular h3,
#usability h3 {
  font-weight: var(--fw-semi);
  color: var(--grey-700);
}

#precision .section-title .accent-blue,
#modular .section-title .accent-blue,
#usability .section-title .accent-blue {
  font-weight: var(--fw-semi);
}

#precision h3 strong,
#modular h3 strong,
#usability h3 strong {
  color: var(--blue-500);
  font-weight: var(--fw-semi);
}

#precision p strong, #precision li strong,
#modular p strong,   #modular li strong,
#usability p strong, #usability li strong {
  font-weight: var(--fw-bold);
}

#precision p, #precision li,
#modular p,   #modular li,
#usability p, #usability li {
  font-size: var(--text-md);
  line-height: var(--line-height);
}

#precision li,
#modular li,
#usability li {
  margin-bottom: var(--sp-3);
}

#precision ul,
#modular ul,
#usability ul {
  list-style: disc;
  padding-left: var(--sp-6);
  margin-top: var(--sp-3);
}

#precision h3,
#modular h3,
#usability h3 {
  margin-bottom: var(--sp-5);
}

#usability .card-pl__title {
  font-size: var(--text-lg);
}


/* ── PRECISION SECTION cells ─────────────────────────────────────  */

.p-cell--img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}
.p-cell--img img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

.p-cell--patent {
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-cell--patent h3 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semi);
  color: var(--text-heading);
  line-height: 1.3;
  margin-bottom: var(--sp-4);
}
.p-cell--patent h3 strong {
  color: var(--color-brand);
  font-weight: var(--fw-bold);
}
.p-cell--patent p {
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
}
.p-cell--patent p strong { font-weight: var(--fw-semi); }

.p-cell--metrics {
  display: flex;
  align-items: stretch;
  background: var(--blue-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.p-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  border-right: 1px solid var(--color-border-blue);
  text-align: center;
}
.p-metric:last-child { border-right: none; }
.p-metric__icon {
  font-size: 1.6rem;
  color: var(--color-brand);
  line-height: 1;
}
.p-metric__value {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-brand);
  line-height: 1.1;
}
.p-metric__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.p-cell--synthesis {
  height: 100%;
  display: flex;
  align-items: center;
  padding: var(--sp-4);
}
.p-cell--synthesis p {
  font-size: var(--text-md);
  color: var(--text-body);
  line-height: 1.75;
  margin: 0;
}

.p-cell--diagram {
  height: 100%;
  min-height: 180px;
  background: #fff;
  border: 1px solid var(--color-border-blue);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.p-cell--diagram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 767px) {
  .p-cell--metrics { flex-direction: column; }
  .p-metric { border-right: none; border-bottom: 1px solid var(--color-border-blue); }
  .p-metric:last-child { border-bottom: none; }
}


/* ── FEAT BANNER & TRIO (ipso-lab PART 2) ────────────────────────  */

.feat-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.feat-banner img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.feat-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    hsl(204 70% 10% / 0.85) 0%,
    hsl(204 70% 10% / 0.40) 55%,
    transparent 80%
  );
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--sp-12);
}
.feat-banner__statement {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.3;
  max-width: 500px;
  margin-bottom: var(--sp-2);
}
.feat-banner__sub {
  font-size: var(--text-base);
  color: #fff;
  margin: 0;
}

.feat-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}
.feat-trio__item {
  background: var(--bg-page);
  border: 1px solid var(--color-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.feat-trio__item .feat-icon {
  font-size: 1.75rem;
  color: var(--color-brand);
  margin-bottom: var(--sp-3);
  line-height: 1;
}
.feat-trio__item h4 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-2);
}
.feat-trio__item p {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--line-height);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .feat-banner img { height: 280px; }
  .feat-banner__overlay { padding: 0 var(--sp-6); }
  .feat-banner__statement { font-size: var(--text-xl); }
  .feat-trio { grid-template-columns: 1fr; }
}


/* ── 22. HERO STATS ─────────────────────────────────────────────
   Inline metrics row within the hero section
   ─────────────────────────────────────────────────────────────── */

.hero-stats {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border-blue);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.hero-stat__top {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  line-height: 1;
}

.hero-stat__num {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-brand);
  letter-spacing: -0.03em;
}

.hero-stat__unit {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
}

.hero-stat__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

@media (max-width: 767px) {
  .hero-stats { gap: var(--sp-6); }
}


/* ── CTA CARD ────────────────────────────────────────────────────
   Centred call-to-action panel inside a section container.
   Usage:
     <div class="cta-card">
       <h3>...</h3>
       <p>...</p>
       <div class="d-flex gap-3 ..."> buttons </div>
     </div>
   ─────────────────────────────────────────────────────────────── */

.cta-card {
  background: #fff;
  border: 1.5px solid var(--color-border-blue);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-12);
  text-align: center;
}
.cta-card h3 { margin-bottom: var(--sp-3); }
.cta-card p  { color: var(--text-body); margin-bottom: var(--sp-6); }
@media (max-width: 767px) {
  .cta-card { padding: var(--sp-8) var(--sp-6); }
}


/* ══════════════════════════════════════════════════════════════════
   23.  CONTACT MODAL
        .contact-modal  __head  __icon-wrap  __title  __tabs  __tab
   ══════════════════════════════════════════════════════════════════ */

.contact-modal { overflow: hidden; }

.contact-modal__head {
  background: var(--bg-deep);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  text-align: center;
  position: relative;
}

.contact-modal__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
}

.contact-modal__icon-wrap {
  font-size: 2rem;
  color: var(--text-on-deep);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.contact-modal__title {
  color: var(--text-on-deep);
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-4);
}

.contact-modal__tabs {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}

.contact-modal__tab {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.60);
  border-radius: var(--radius-pill);
  padding: 0.3rem 1rem;
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}

.contact-modal__tab:hover {
  border-color: rgba(255, 255, 255, 0.70);
  color: #fff;
}

.contact-modal__tab.active {
  background: #fff;
  border-color: #fff;
  color: var(--color-brand);
  font-weight: var(--fw-semi);
}

.contact-modal .modal-footer {
  border-top: none;
  padding-top: 0;
}

.contact-form__feedback {
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.contact-form__feedback--ok {
  background: var(--blue-100);
  color: var(--blue-800);
}
.contact-form__feedback--err {
  background: var(--red-100);
  color: var(--red-700);
}