/* metrology-calibration.html - page-specific styles */

/* ---- page-specific section styles ---- */

/* section block 1 */
.fua-section{background: #90c8f9;}  
.fua-wrap{padding:56px 40px 60px;max-width:1320px;margin:0 auto}
.fua-head{margin-bottom:32px}
.fua-kicker{font-family:"DM Sans",sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#0e7a6d;margin:0 0 12px}
.fua-head h2{font-family:"DM Sans",sans-serif;font-weight:800;font-size:28px;line-height:1.2;margin:0 0 16px;color:#0a0c2e}
.fua-head p{font-size:14.5px;line-height:1.75;color:#55607a;margin:0 0 14px}

.fua-body{display:grid;grid-template-columns:.65fr 1.35fr;gap:20px;align-items:stretch}
.fua-tabs{display:flex;flex-direction:column;gap:12px}
.fua-tab{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(10,12,46,.08);border-radius:14px;padding:18px 20px;cursor:pointer;transition:all .3s}
.fua-tab b{font-family:"DM Sans",sans-serif;font-weight:800;font-size:13px;color:#0e7a6d;width:22px;flex:0 0 auto}
.fua-tab span{font-family:"DM Sans",sans-serif;font-weight:700;font-size:15px;color:#0a0c2e}
.fua-tab.active{background:#0a0c2e;border-color:#0a0c2e}
.fua-tab.active b{color:#67e8f9}
.fua-tab.active span{color:#fff}

.fua-panel{background:#fff;border-radius:18px;padding:32px 34px;display:grid;grid-template-columns:1fr .8fr;gap:24px;align-items:center;box-shadow:0 10px 30px rgba(10,12,46,.05)}
.fua-panel h3{font-family:"DM Sans",sans-serif;font-weight:800;font-size:24px;margin:0 0 10px;color:#0a0c2e}
.fua-rule{width:40px;height:3px;background:#0e7a6d;margin-bottom:16px;border-radius:2px}
.fua-panel p{font-size:14px;line-height:1.7;color:#55607a;margin:0 0 20px;max-width:44ch}
.fua-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.fua-item{display:flex;align-items:flex-start;gap:10px}
.fua-item svg{width:22px;height:22px;stroke:#0e7a6d;fill:none;stroke-width:1.7;flex:0 0 auto;margin-top:1px}
.fua-item span{font-size:13.5px;font-weight:600;color:#0a0c2e;line-height:1.4}

.fua-art{position:relative;height:100%;min-height:220px;border-radius:14px;background:#eef3f4;overflow:hidden}
.fua-art img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}

.fua-cta{margin-top:22px;background:#e9f3ef;border-radius:16px;padding:24px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fua-cta-icon{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto}
.fua-cta-icon svg{width:24px;height:24px;stroke:#0e7a6d;fill:none;stroke-width:1.8}
.fua-cta-text{flex:1;min-width:260px}
.fua-cta-text h4{font-family:"DM Sans",sans-serif;font-weight:800;font-size:17px;margin:0 0 6px;color:#0a0c2e}
.fua-cta-text p{margin:0;font-size:13.5px;color:#55607a;line-height:1.6;max-width:60ch}
.fua-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#0e7a6d;color:#fff;font-family:"DM Sans",sans-serif;font-weight:700;font-size:14px;padding:13px 22px;border-radius:999px;text-decoration:none;flex:0 0 auto}
.fua-cta-btn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4}
.cat3{
    padding: 6px 12px;
}
.cat{
padding: clamp(2rem, 10vw, 2rem) 0 !important; 
    background: #f0f8ff;
}
@media (max-width:900px){
  .fua-body{grid-template-columns:1fr}
  .fua-panel{grid-template-columns:1fr}
  .fua-art{display:none}
  .fua-grid2{grid-template-columns:1fr}
}  
  .mc{

    padding:clamp(4.5rem,9vw,7rem) 0;

    background:#fff;

}

.mc-head{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.mc-head h2{

    margin-top:12px;

    font-size:clamp(2rem,4vw,3rem);

}

.mc-head p{

    margin-top:20px;

    color:var(--muted);

    line-height:1.8;

}

/*==========================
GRID
==========================*/

.mc-grid{

    display:grid;

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

    gap:24px;

}

/*==========================
CARD
==========================*/

.mc-card{

    position:relative;

    overflow:hidden;

    border-radius:6px;

    height:250px;

    transition:.45s;

}

.mc-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s;

}

.mc-card:hover img{

    transform:scale(1.08);

}

/*==========================
OVERLAY
==========================*/

.mc-overlay{

    position:absolute;

    inset:0;

    background:

    /* Navy base */
    linear-gradient(
        to top,
        rgba(7,31,66,.96) 0%,
        rgba(7,31,66,.82) 22%,
        rgba(7,31,66,.38) 48%,
        rgba(7,31,66,0) 74%
    ),

    /* Teal glow */
    radial-gradient(
        ellipse at 58% 100%,
        rgba(8,170,178,.85) 0%,
        rgba(8,170,178,.45) 30%,
        rgba(8,170,178,0) 75%
    ),

    /* Green glow */
    radial-gradient(
        ellipse at 100% 100%,
        rgba(108,199,70,.78) 0%,
        rgba(108,199,70,.38) 42%,
        rgba(108,199,70,0) 82%
    );

    transition:.45s;

}



/*==========================
CONTENT
==========================*/

.mc-content{

    position:absolute;

    left:24px;

    right:24px;

    bottom:28px;

    z-index:2;

}

.mc-content h4{

    margin:0;

    color:#fff;

    font-size:18px;

    line-height:1.22;

    font-weight:700;

    letter-spacing:-.02em;

    text-shadow:
        0 2px 10px rgba(0,0,0,.35);

}




/*==========================
HOVER
==========================*/

.mc-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 28px 60px rgba(10,12,46,.22);

}

.mc-card:hover .mc-overlay{

    background:

    linear-gradient(
        to top,
        rgba(7,31,66,.98) 0%,
        rgba(7,31,66,.80) 22%,
        rgba(7,31,66,.28) 48%,
        rgba(7,31,66,0) 74%
    ),

    radial-gradient(
        ellipse at 58% 100%,
        rgba(8,170,178,.95) 0%,
        rgba(8,170,178,.58) 32%,
        rgba(8,170,178,0) 76%
    ),

    radial-gradient(
        ellipse at 100% 100%,
        rgba(108,199,70,.90) 0%,
        rgba(108,199,70,.45) 42%,
        rgba(108,199,70,0) 82%
    );

}
    

.mc-card:hover img{

    transform:scale(1.08);

}

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

@media(max-width:991px){

.mc-grid{

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

}

}

@media(max-width:575px){

.mc-grid{

    grid-template-columns:1fr;

}

.mc-card{

   height:250px;

}

}

/* section block 2 */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#fff;color:#0a0c2e}
.ap20-wrap{padding:64px 40px 90px; background: #d2e9fd;}
.ap20-head{text-align:center;max-width:640px;margin:0 auto 48px}
.ap20-kicker{font-family:"DM Sans",sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#55607a;margin:0 0 10px}
.ap20-head h2{font-family:"DM Sans",sans-serif;font-weight:800;font-size:28px;margin:0 0 14px}
.ap20-head p{font-size:15px;line-height:1.7;color:#55607a !important;margin:0}

.ap20-tabs{display:flex;justify-content:center;gap:0;max-width:1100px;margin:0 auto;border-bottom:1px solid rgba(10,12,46,.1)}
.ap20-tab{display:flex;align-items:center;gap:9px;background:none;border:0;border-bottom:3px solid transparent;padding:0 26px 16px;font-family:"DM Sans",sans-serif;font-weight:700;font-size:15px;color:#8892a6;cursor:pointer;transition:color .25s}
.ap20-tab svg{width:19px;height:19px;stroke:#8892a6;fill:none;stroke-width:1.8;transition:stroke .25s}
.ap20-tab.active{color:#0a0c2e;border-color:#0d9e9e}
.ap20-tab.active svg{stroke:#0d9e9e}

.ap20-body{max-width:1100px;margin:36px auto 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:32px}
.ap20-card{position:relative;overflow:clip;border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;background-size:cover;background-position:center;background-color:#0e2740}
.ap20-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,46,.15) 0%,rgba(10,12,46,.55) 55%,rgba(10,12,46,.9) 100%);z-index:0}
.ap20-card h3,.ap20-card p,.ap20-btn{position:relative;z-index:1}
.ap20-card h3{font-family:"DM Sans",sans-serif;font-weight:800;font-size:20px;margin:0 0 12px;color:#fff}
.ap20-card p{font-size:14px;line-height:1.65;color:rgba(226,232,240,.88);margin:0 0 22px;max-width:32ch}

/* >>> Photo placeholders — swap per active tab <<< */
.ap20-card.tab-program{background-image:url('/assets/images/risk-based-validation.png')}
.ap20-card.tab-uncertainty{background-image:url('/assets/images/metrology/02.jpg')}
.ap20-card.tab-accreditation{background-image:url('/assets/images/metrology/03.jpg')}
.ap20-card.tab-support{background-image:url('/assets/images/metrology/04.jpg')}
.ap20-btn{align-self:flex-start;background:linear-gradient(100deg,#0d9e9e,#3dbb8e);color:#04121a;font-family:"DM Sans",sans-serif;font-weight:700;font-size:13.5px;padding:11px 22px;border-radius:999px;text-decoration:none}

.ap20-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.ap20-item{display:flex;gap:14px}
.ap20-item svg{width:24px;height:24px;stroke:#0d9e9e;fill:none;stroke-width:1.7;flex:0 0 auto;margin-top:2px}
.ap20-item h4{font-family:"DM Sans",sans-serif;font-weight:700;font-size:15.5px;margin:0 0 6px}
.ap20-item p{font-size:13.5px;line-height:1.6;color:#55607a !important;margin:0}

@media (max-width:860px){
  .ap20-body{grid-template-columns:1fr}
  .ap20-grid{grid-template-columns:1fr}
  .ap20-tabs{flex-wrap:wrap;justify-content:flex-start;gap:6px}
  .ap20-tab{padding:0 14px 12px;font-size:13px}
  .ap20-head h2{font-size:30px}
}

/* ==========================================================================
   Overview section ("Tolerance band") — added Aug 2026.
   Copy left; photograph right inside a frame carrying a measurement scale
   with the in-tolerance range marked, plus a status readout chip.
   Scoped under .m36. Uses the sitewide .wrap container.
   ========================================================================== */
.m36{background:#fff;}
.m36-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,4vw,64px);align-items:center}
.m36 .kicker{font-family:"DM Sans",sans-serif;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan) !important;margin:0 0 12px}
.m36 h2{font-family:"DM Sans",sans-serif;font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.025em;
  color:var(--navy);font-weight:600;margin:0}
.m36-lede{margin:22px 0 0;font-size:16.5px;line-height:1.78;color:#475569;max-width:60ch}
.m36-lede + .m36-lede{margin-top:16px}

.m36-media{position:relative;padding-left:34px}
.m36-scale{position:absolute;left:0;top:6px;bottom:6px;width:22px;
  background:repeating-linear-gradient(180deg,#cfdbdb 0 1px,transparent 1px 12px)}
.m36-scale::after{content:"";position:absolute;left:0;right:0;top:34%;height:32%;
  border-top:2px solid var(--lime);border-bottom:2px solid var(--lime)}
.m36-shot{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3.2;background:var(--navy)}
.m36-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.m36-media:hover .m36-shot img{transform:scale(1.04)}
.m36-read{position:absolute;right:16px;bottom:16px;z-index:2;background:rgba(10,12,46,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:3px;padding:12px 16px;color:#fff}
.m36-read em{display:block;font-family:"DM Sans",sans-serif;font-size:9.5px;letter-spacing:.18em;
  color:var(--lime);font-style:normal}
.m36-read b{font-family:"DM Sans",sans-serif;font-size:15px}

@media (max-width:1000px){
  .m36-grid{grid-template-columns:1fr}
  .m36-lede{max-width:none}
}
@media (prefers-reduced-motion:reduce){.m36-shot img{transition:none}}

/* ==========================================================================
   "Where AVEX Supports Measurement Confidence" — added Aug 2026.
   Auto-advancing spotlight: six stacked slides crossfade in one stage while
   a compact list beside it shows the active entry and its progress.
   Scoped under .q49.
   ========================================================================== */
.q49{background:var(--navy);color:#fff;}
.q49 .kicker{font-family:"DM Sans",sans-serif;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:#8fd16a !important;margin:0 0 12px}
.q49 h2{font-family:"DM Sans",sans-serif;font-size:clamp(26px,2.8vw,40px);line-height:1.13;
  letter-spacing:-.025em;color:#fff;font-weight:600;margin:0}
.q49-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,3vw,44px);align-items:stretch;
  margin-top:clamp(18px,2vw,28px)}

/* Slides are stacked and crossfade, so there is never a blank frame. */
.q49-stage{position:relative;border-radius:16px;overflow:hidden;background:#06081d;min-height:440px}
.q49-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.q49-slide.on{opacity:1;pointer-events:auto}
.q49-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);
  transition:transform 4.6s linear}
.q49-slide.on img{transform:scale(1)}
.q49-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,46,.12),rgba(10,12,46,.94))}
.q49-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,3vw,36px)}
.q49-cap em{font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.16em;
  color:var(--lime);font-style:normal}
.q49-cap b{display:block;font-family:"DM Sans",sans-serif;font-size:clamp(20px,2.2vw,27px);margin:10px 0;line-height:1.2}
.q49-cap p{margin:0;font-size:15px;line-height:1.68;color:rgba(255,255,255,.86);max-width:56ch}
.q49-slide.on .q49-cap{animation:q49rise .7s var(--ease)}
@keyframes q49rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* The active row carries a progress bar showing time to the next slide. */
.q49-list{display:grid;align-content:start;border-top:1px solid rgba(255,255,255,.14)}
.q49-item{position:relative;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;
  padding:17px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.14);cursor:pointer;overflow:hidden;
  font-family:"DM Sans",sans-serif;font-size:15.5px;color:rgba(255,255,255,.66);background:none;
  text-align:left;width:100%;transition:color .35s var(--ease),padding-left .35s var(--ease),background .35s ease}
.q49-item em{font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.12em;
  color:rgba(255,255,255,.32);font-style:normal;transition:color .3s}
.q49-item:hover{color:#fff}
.q49-item.on{color:#fff;padding-left:14px;background:rgba(255,255,255,.06)}
.q49-item.on em{color:var(--lime)}
.q49-item:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.q49-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--lime);
  transform:scaleX(0);transform-origin:left;opacity:0}
.q49-item.on .q49-bar{opacity:1;animation:q49fill var(--dur,4s) linear forwards}
.q49-paused .q49-item.on .q49-bar{animation-play-state:paused}
@keyframes q49fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:1000px){
  .q49-grid{grid-template-columns:1fr}
  .q49-stage{min-height:340px}
}
@media (prefers-reduced-motion:reduce){
  .q49-slide,.q49-slide img,.q49-item{transition:none}
  .q49-slide.on .q49-cap{animation:none}
  .q49-item.on .q49-bar{animation:none;transform:scaleX(1)}
}

/* ==========================================================================
   Core Service Areas — icon row ("Medallions") — added Aug 2026.
   Seven ringed icon medallions threaded on a hairline, labels beneath.
   Two-tone inline SVG: navy structure, #0a0c2e accent. Scoped under .z78.
   ========================================================================== */
.z78{background:#e6f0ea;--green:#3fa34d}
.z78-head{text-align:center}
.z78 .kicker{font-family:"DM Sans",sans-serif;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.z78 h2{font-family:"DM Sans",sans-serif;font-size:clamp(26px,3vw,42px);line-height:1.14;letter-spacing:-.025em;
  color:var(--navy);font-weight:700;margin:0}
.z78-row{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.z78-row::before{content:"";position:absolute;left:7%;right:7%;top:44px;height:1px;background:#000000;}
.z78-i{position:relative;text-align:center}
.z78-m{position:relative;width:88px;height:88px;margin:0 auto 18px;border-radius:50%;background:#fff;
  border:1.5px solid #e0e9e9;display:grid;place-content:center;z-index:1;
  transition:border-color .35s ease,transform .4s var(--ease),box-shadow .4s ease}
.z78-m::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--c);opacity:0;
  transition:opacity .4s ease,inset .4s var(--ease)}
.z78-i:hover .z78-m{border-color:var(--c);transform:translateY(-4px);box-shadow:0 16px 34px -20px var(--c)}
.z78-i:hover .z78-m::before{opacity:.5;inset:-10px}
.z78-m svg{width:42px;height:42px}
.z78 .ic .p{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s ease}
.z78 .ic .a{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s ease}
.z78-i:hover .ic .p{stroke:var(--c)}
.z78-i b{font-family:"DM Sans",sans-serif;font-size:14px;color:var(--navy);font-weight:600;line-height:1.36;
  display:block;max-width:15ch;margin:0 auto}
.z78-row > .z78-i:nth-child(1){--c:var(--navy)}.z78-row > .z78-i:nth-child(2){--c:var(--ocean)}
.z78-row > .z78-i:nth-child(3){--c:#1b6b8a}.z78-row > .z78-i:nth-child(4){--c:var(--cyan)}
.z78-row > .z78-i:nth-child(5){--c:var(--sage)}.z78-row > .z78-i:nth-child(6){--c:#2f7a52}
.z78-row > .z78-i:nth-child(7){--c:#5a9e4a}
@media (max-width:1200px){
  .z78-row{grid-template-columns:repeat(4,1fr);row-gap:34px}
  .z78-row::before{display:none}
}
@media (max-width:700px){
  .z78-row{grid-template-columns:repeat(2,1fr)}
  .z78-m{width:76px;height:76px}
  .z78-m svg{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.z78-m,.z78-m::before,.z78 .ic .p,.z78 .ic .a{transition:none}}

/* ==========================================================================
   "How AVEX Helps" (Option 26 — cleared list) — added Aug 2026.
   Moved out of the page's inline <style>, which also carried a global reset
   (:root tokens, *, body, .wrap, .kicker, .hd) that was overriding the
   sitewide container and design tokens.
   ========================================================================== */
.h26{background:#ffff;font-size:13px;}
.h26-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,86px);align-items:center}
.h26-lede{margin:16px 0 0;font-size:15.5px;line-height:1.7;color:#5f6f7c;max-width:58ch}
.h26-list{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid #e6ecec}
.h26-list li{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:center;padding:17px 6px 17px 0;
  border-bottom:1px solid #e6ecec;font-family:"DM Sans",sans-serif;font-size:16px;color:var(--navy);line-height:1.45;
  transition:padding-left .35s var(--ease),background .3s ease}
.h26-list li:hover{padding-left:10px;background:#f5fbfa}
.h26-tick{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--sage);display:grid;place-content:center;
  transition:background .35s ease,border-color .35s ease}
.h26-tick svg{width:12px;height:12px;stroke:var(--sage);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s ease}
.h26-list li:hover .h26-tick{background:var(--sage);border-color:var(--sage)}
.h26-list li:hover .h26-tick svg{stroke:#fff}
.h26-shot{border-radius:16px;overflow:hidden;aspect-ratio:4/2.9;background:var(--navy)}
.h26-shot img{width:100%;height:100%;object-fit:cover}

@media (max-width:1000px){.h26-grid{grid-template-columns:1fr}.h26-lede{max-width:none}}
@media (prefers-reduced-motion:reduce){.h26-list li,.h26-tick,.h26-tick svg{transition:none}}
.h26 .kicker{font-family:"DM Sans",sans-serif;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.h26 h2{font-family:"DM Sans",sans-serif;font-size:clamp(26px,2.8vw,40px);line-height:1.13;
  letter-spacing:-.025em;color:var(--navy);font-weight:600;margin:0}

/* ---- Consistent vertical rhythm for the sections added Aug 2026 -------- */
.m36,.q49,.z78,.h26{padding:clamp(28px,1vw,58px) 0}
.q49-grid,.z78-row,.h26-grid{margin-top:clamp(16px,1.8vw,16px)}
.m36-grid{margin-top:clamp(12px,1.4vw,12px)}

/* The z78 row sat far from its heading and far from the next section. */
.z78-head{margin-bottom:0; padding: 20px 2px;}
.z78-row{margin-bottom:0}


/* ===== Extracted from inline <style> blocks in metrology-calibration.html on consolidation pass ===== */

/* --- inline block 1 --- */
/* ==========================================================================
   "Why It Matters" — Option 86 with solid brand-colour cards.
   Layout unchanged from the option file; only the card surface is now a
   solid palette fill with white text and the corner-circle motif.
   Scoped under .o86.
   ========================================================================== */
.o86{background:#e6f0ea;padding:clamp(38px,2vw,58px) 0}
.o86-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:clamp(28px,4vw,68px);align-items:start}
.o86 .kicker{font-family:"DM Sans",sans-serif;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:#0d9e9e;margin:0 0 12px}
.o86 h2{font-family:"DM Sans",sans-serif;font-size:clamp(25px,2.7vw,38px);line-height:1.15;letter-spacing:-.024em;
  color:#0a0c2e;font-weight:700;margin:0}
.o86-lede{margin:16px 0 0;font-size:15.5px;line-height:1.72;color:#5f6f7c}
.o86-lede + .o86-lede{margin-top:12px}

.o86-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.o86-c{position:relative;background:var(--c,#0a0c2e);color:#fff;border-radius:14px;padding:22px 20px 24px;overflow:hidden;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease}
.o86-c::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;
  background:rgba(255,255,255,.07);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.o86-c:hover{transform:translateY(-4px);box-shadow:0 22px 42px -30px rgba(10,12,46,.45)}
.o86-c:hover::after{transform:scale(1.25)}
.o86-c em{display:block;font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.14em;
  color:rgba(255,255,255,.62);font-style:normal;margin-bottom:9px;position:relative;z-index:1}
.o86-c b{display:block;font-family:"DM Sans",sans-serif;font-size:17px;color:#fff;font-weight:700;
  margin-bottom:7px;line-height:1.3;position:relative;z-index:1}
.o86-c p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);position:relative;z-index:1}

/* Literal hex, not var() — the brand tokens are not all resolvable in every
   page scope (--ocean in particular), which left those cards transparent. */
.o86-cards > .o86-c:nth-child(1){--c:#0a0c2e}  /* navy       */
.o86-cards > .o86-c:nth-child(2){--c:#0e4d6e}  /* ocean      */
.o86-cards > .o86-c:nth-child(3){--c:#1b6b8a}  /* deep blue  */
.o86-cards > .o86-c:nth-child(4){--c:#0d9e9e}  /* cyan       */
.o86-cards > .o86-c:nth-child(5){--c:#2f7a52}  /* moss       */
.o86-cards > .o86-c:nth-child(6){--c:#3dbb8e}  /* sage       */

@media (max-width:1000px){.o86-grid{grid-template-columns:1fr}}
@media (max-width:600px){.o86-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.o86-c,.o86-c::after{transition:none}}