/* =====================================================
   1. ROOT VARIABLES
   ===================================================== */

:root{
  /* Colors */
  --bg: #ffffff;
  --bg2: #fbfaf8;
  --text: #2c3e50;
  --muted: #5b6774;
  --border: rgba(44,62,80,.12);
  --card: rgba(255,255,255,.78);

  /* Effects */
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;

  /* Layout */
  --max: 1100px; /* controls content block width */
  --navbar-height: 60px;
  --page-side-padding: 20px;

  /* Spacing */
  --section-padding: 12px;
  --section-padding-tight: 44px;
  --page-content-gap: 48px;
  --paragraph-spacing: 1.2em; /* controls the line spacing throughout the website */

  /* Typography */
  --font-family-base: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --brand-font-size: 15px;
  --nav-font-size: 14px;
  --kicker-font-size: 12px;
}

/* =====================================================
   2. GLOBAL RESET
   ===================================================== */

*{
  box-sizing: border-box;
}

html,
body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
}

html {
  scroll-behavior: smooth;
}

body{
  font-family: var(--font-family-base);
  color: var(--text);
  line-height: 1.6;
}

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

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

a:hover{
  opacity: .9;
}


body{padding-top:30px;
}

/* Anti-copy: disable selection globally; allow in form fields */
body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, select, button, [contenteditable="true"]{
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
/* =====================================================
   3. GLOBAL LAYOUT
   ===================================================== */

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--page-side-padding);
  padding-right: var(--page-side-padding);
}

.section{
  padding: var(--section-padding) 0;
}

.section.tight{
  padding: var(--section-padding-tight) 0;
}

main{
  position: relative;
  z-index: 0;
}

/* =====================================================
   4. NAVIGATION BAR
   ===================================================== */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  opacity: 1;
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: none;
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  height: 50px;
  flex-wrap: nowrap;
  overflow: visible;
}

.brand{
  font-size: var(--brand-font-size);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1;
}

.navlinks{
  display: flex;
  gap: 28px;
  align-items: center;
  overflow: visible;
}

.navlinks > *{
  display: inline-flex;
  align-items: center;
}

.navlinks a{
  padding: 0 15px;
  color: var(--text);
  font-size: var(--nav-font-size);
  font-weight: 300;
  line-height: 1;
  transition: font-weight .15s ease, opacity .15s ease;
}

.navlinks a:hover{
  font-weight: 700;
  opacity: 1;
}

.navlinks a.active{
  font-weight: 700;
}

/* ---------- Hamburger button ---------- */

.hamburger{
  display:none;
  align-items:center;
  justify-content:center;

  width:44px;
  height:44px;

  border:none;
  background:transparent;

  padding:0;
  margin:0;

  cursor:pointer;
}

.hamburger span{
  width: 18px;
  height: 2px;
  background: var(--text);
  display: block;
  position: relative;
}

.hamburger span:before,
.hamburger span:after{
  content: "";
  width: 18px;
  height: 2px;
  background: var(--text);
  position: absolute;
  left: 0;
}

.hamburger span:before{ top: -6px; }
.hamburger span:after{ top: 6px; }

/* Dropdown */
.nav .dropdown,
.nav-item.dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav .dropdown-toggle,
.nav .nav-link{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
  line-height: 1;
}

.nav .dropdown-toggle::after{
  content: "▾";
  font-size: 11px;
  margin-left: 6px;
  opacity: .7;
}

.nav .dropdown-menu{
  position: absolute;
  top: 100%;
  left: -5%;
  min-width: 190px;
  display: none;
  z-index: 9999;
  padding: 10px 0 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.nav .dropdown-menu::before{
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav .dropdown-link{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
  color: rgba(44,62,80,.92);
  background: transparent;
}

.nav .dropdown-link:hover{
  font-weight: 700;
  background: rgba(44,62,80,.06);
}

@media (min-width: 861px){
  .nav .dropdown:hover .dropdown-menu,
  .nav .dropdown:focus-within .dropdown-menu{
    display: block;
  }
}

.nav .dropdown.open .dropdown-menu{
  display: block;
}

/* ---------- MOBILE / TABLET NAVIGATION BAR ---------- */

.mobilemenu{
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 9998;
  width: 100%;

  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-top: 1px solid var(--border);
  padding: 16px 24px 20px;

  max-height: calc(100vh - 72px);
  overflow-y: auto;

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

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

.mobilemenu.open{
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* mobile menu links */
.mobilemenu a{
  display: block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
}

.mobilemenu a:hover{
  color: #000;
}

/* hamburger */
.hamburger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.hamburger span{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
}

/* responsive behavior */
@media (max-width: 1024px){

  .nav{
    height: 72px;
  }

  .navlinks{
    display: none;
  }

  .hamburger{
    display: flex;
  }

}

/* ---------- END MOBILE / TABLET NAVIGATION BAR ---------- */

/* =====================================================
   5. FOOTER
   ===================================================== */

.footer{
  border-top: 1px solid var(--border);
  background: #ffffff;
  padding: 22px 0;
}

.footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.footer .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer small{
  color: rgba(44,62,80,.7);
}

.footer-links{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: none;
}

.footer-links a{
  text-decoration: none;
  color: rgba(44,62,80,.82);
}

.footer-links a:hover{
  font-weight: 700;
}

.footer-name,
.footer-email,
.footer-copy{
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(44,62,80,.78);
}

.footer-email{
  text-transform: uppercase;
}

.social{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
}

.social img{
  width: 24px;
  height: 24px;
  display: block;
  background: transparent;
  border: none;
}

.social svg{
  width: 18px;
  height: 18px;
  opacity: .8;
}

.social a:hover{
  opacity: .65;
  transition: opacity .18s ease;
}


/* =====================================================
   6. SHARED COMPONENTS
   ===================================================== */

/* Global Kicker Settings */
.kicker{
  font-size: var(--kicker-font-size);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(44,62,80,.75);
  margin-bottom: 12px;
}

/* Global Clamp (for responsiveness) headings Settings */
h1{
  margin: 0 0 16px;
  font-size: clamp(32px, 4vw, 36px);
  line-height: 1.15;
  letter-spacing: 0em;
}

h2{
  margin: 10px 0;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: 0em;
}

h3{
  margin: 8px 0;
  font-size: clamp(24px, 2.4vw, 28px);
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: 0em;
}

h4{
  margin: 6px 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  margin-bottom: 14px;
  letter-spacing: 0em;
}

/* Global Paragraph Settings */
p{
  margin: var(--paragraph-spacing) 0;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0em;
}

ul{
  margin: 12px 0 0 18px;
}

/* Generic form controls */
input,
textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 12px 14px;
  font: inherit;
  background: rgba(255,255,255,.85);
}

textarea{
  min-height: 140px;
  resize: vertical;
}

button{
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  font: inherit;
  cursor: pointer;
  background: rgba(44,62,80,.92);
  color: #ffffff;
  box-shadow: none;
}

button:hover{
  opacity: .92;
}

/* Generic layout helpers */
.grid-2{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: start;
}

.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.stack{
  display: grid;
  gap: 16px;
}

.media{
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  background: #e9e6df;
}

.media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media.small{
  min-height: 220px;
}

.tiles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.tile{
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  background: #e9e6df;
}

.tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Simple divider */
.hr{
  height: 1px;
  margin: 18px 0;
  background: var(--border);
}

/* Badge */
.badge{
  display: inline-block;
  margin: 8px 6px 0 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(44,62,80,.8);
  background: rgba(255,255,255,.55);
}

/* Map wrapper */
.map{
  height: 280px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Shared responsive helpers */
@media (max-width: 900px){
  .grid-2{
    grid-template-columns: 1fr;
  }

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

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

/* Cookie banner */
.cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
}
.cookie-inner{
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 16px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.cookie-title{ font-weight: 700; letter-spacing: .04em; margin-bottom: 4px; }
.cookie-body{ font-size: 15px; line-height: 1.55; color: rgba(44,62,80,.82); }
.cookie-body a{ text-decoration:none; border-bottom:1px solid rgba(44,62,80,.25); }
.cookie-body a:hover{ border-bottom-color: rgba(44,62,80,.55); font-weight:700; }
.cookie-btn{ padding:10px 16px; border-radius:999px; font-weight:700; }
.cookie-banner.hide{ opacity:0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
@media (max-width:760px){
  .cookie-inner{ flex-direction: column; align-items:flex-start; }
  .cookie-btn{ width:100%; text-align:center; }
}

/* =====================================================
   7. PAGE SETTINGS — HOME (index.html)
   ===================================================== */

body.home{
  padding-top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.home > main{
  flex: 1 0 auto;
}

body.home > footer{
  flex-shrink: 0;
}

/* Home page: transparent navigation bar + white text */
body.home .topbar{
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home .topbar .brand,
body.home .topbar .navlinks a,
body.home .topbar .hamburger{
  color: #FFFFFF !important;
}

body.home .topbar .hamburger{
  background: transparent !important;
  border-color: rgba(255,255,255,.35) !important;
}

body.home .topbar .hamburger span,
body.home .topbar .hamburger span:before,
body.home .topbar .hamburger span:after{
  background: rgba(255,255,255,.96) !important;
}

body.home .topbar .navlinks a:hover{
  font-weight: 700;
}

/* Home hero */
.home-hero{
  position: relative;
  height: 60vh;
  min-height: 360px;
  overflow: hidden;
}

.hero-video,
.hero-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
}

.hero-slide{
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  text-align: center;
  padding: 0 18px;
}

.hero-slide.active{
  opacity: 1;
}

.hero-slide h1,
.hero-slide h2{
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  color: #FFFFFF;
  white-space: normal;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 90vw;
  margin: 0 auto;
}

.home-subtext{
  padding: 36px 0 40px 0;
}

.subslide{
  display: none;
  font-size: 16px;
  letter-spacing: .12em;
  line-height: 1.85;
  color: #111111;
  max-width: 920px;
  margin: 0 auto;
  font-weight: 300;
  text-align: center;
}
.home-subtext .container{
  position: relative;
  padding-left: 60px;
  padding-right: 60px;
}

.subslide.active{
  display: block;
}

.home-subtext .hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 60px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.home-subtext .hero-arrow.left{
  left: 0;
}

.home-subtext .hero-arrow.right{
  right: 0;
}

.home-subtext .hero-arrow::before{
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-right: 2px solid rgba(17,17,17,.55);
  border-bottom: 2px solid rgba(17,17,17,.55);
  transform: rotate(135deg);
}

.home-subtext .hero-arrow.right::before{
  transform: rotate(-45deg);
}

@media (max-width: 760px){
  body.home .hero-slide h1{
    font-size: 48px;
    white-space: normal;
  }

  .home-subtext .container{
    padding-left: 40px;
    padding-right: 40px;
  }

  .home-subtext .hero-arrow{
    width: 40px;
    height: 40px;
  }
}

/* =====================================================
   8. COMBINED ABOUT PAGE (about.html)
   ===================================================== */

body.about-combined-page{
  background: #ffffff;
}

body.about-combined-page .about-main{
  min-height: auto;
  padding-top: 70px;
}

/* ---------- Scroll Snapping One Page Per Section ---------- */

body.about-combined-page .about-main{
  min-height: auto;
  padding-top: 70px;
  scroll-snap-type: y mandatory;
}

body.about-combined-page .about-main > section{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ---------- Section 1: Who We Are ---------- */

body.about-combined-page .who-we-are-panel{
  width: 100%;
  background: #efefec;
  min-height: auto;
  margin-top: 60px;   /* increase white space */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 0;
  box-sizing: border-box;
}

body.about-combined-page .who-we-are-grid{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas: "image content";
  gap: 24px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  transform: none;
}

body.about-combined-page .who-we-are-image{
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin-top: 0px;
}

body.about-combined-page .who-we-are-image img{
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

body.about-combined-page .who-we-are-content{
  padding-top: 0px;
  color: #222;
}

body.about-combined-page .who-we-are-content h2,
body.about-combined-page .who-we-are-content h4{
  color: #111;
}

body.about-combined-page .who-we-are-content p{
  margin: 0 0 28px 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
  color: #222;
  text-align: left;
  max-width: 880px; /* controls content width, together with 1. Root Variables Layout max */
}

/* ---------- Section 2: Principals Landing ---------- */

body.about-combined-page .principals-panel{
  width: 100%;
  background: #efefec; /* same grey as Who We Are */
  min-height: auto;     /* auto height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 0;  /* same as Who We Are */
  box-sizing: border-box;
}

body.about-combined-page .principals-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px; /* slightly different from Who We Are */
  grid-template-areas: "content image";
  gap: 24px;
  align-items: center;
  max-width: 1100px;   /* SAME width as Who We Are */
  width: 100%;
  margin: 0 auto;
}

body.about-combined-page .principals-panel-content{
  grid-column: 1;
  grid-row: 1;
  padding-top: 0px;
  color: #222;
  text-align: left;
}

body.about-combined-page .principals-image{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  margin-top: 0px;
}

body.about-combined-page .principals-image img{
  width: 230px;
  max-width: none;
  height: auto;
  display: block;
}

body.about-combined-page .principals-panel-content p{
  margin: 0 0 28px 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
  color: #222;
  text-align: left;
  max-width: 880px;
}

/* ---------- Section 3: Principals Cards ---------- */

body.about-combined-page .principals-section{
  padding-top: 50px;
  padding-bottom: 60px;
}

/* this is the setting for "Principals" */
body.about-combined-page .about-content h1{
  text-align: center;
}

body.about-combined-page .principals-panel-content h2,
body.about-combined-page .principals-panel-content h4{
  color: #111;
}

body.about-combined-page .principals-grid-centered{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

body.about-combined-page .principal-centered{
  position: relative;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(44,62,80,.10);
  border-radius: 18px;
  padding: 28px 24px 60px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
  width: 320px;
  max-width: 320px;
}

body.about-combined-page .principal-centered:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: rgba(44,62,80,.16);
}

body.about-combined-page .principal-photo-lg{
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(44,62,80,.10);
  background: rgba(44,62,80,.06);
}

body.about-combined-page .principal-photo-lg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.08) brightness(.98);
}

body.about-combined-page .principal-name-lg{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #111111;
}

body.about-combined-page .principal-title{
  font-size: 15px;
  font-weight: 500;
  color: rgba(13,15,18,.75);
  margin-bottom: 6px;
}

body.about-combined-page .principal-quals-lg{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(13,15,18,.78);
}

body.about-combined-page .principal-bio-lg{
  margin: 18px auto 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(13,15,18,.82);
  text-align: left;
}

body.about-combined-page .principal-toggle{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
}

body.about-combined-page .principal-toggle::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #7f8a94;
  border-bottom: 2px solid #7f8a94;
  transform: rotate(45deg);
}

body.about-combined-page .principal-toggle[aria-expanded="true"]::before{
  transform: rotate(-135deg);
  top: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px){
  body.about-combined-page .who-we-are-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.about-combined-page .who-we-are-image{
    justify-content: flex-start;
  }

  body.about-combined-page .who-we-are-image img{
    width: min(48vw, 220px);
    max-width: 220px;
  }

  body.about-combined-page .who-we-are-content{
    padding-top: 0;
  }

  body.about-combined-page .principals-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.about-combined-page .principals-panel-content{
    grid-column: auto;
    padding-top: 40px;
  }

  body.about-combined-page .principals-image{
    grid-column: auto;
    justify-content: flex-start;
    margin-top: 0;
  }

  body.about-combined-page .principals-image img{
    width: 180px;
  }

  body.about-combined-page .principals-panel-content p{
    text-align: left;
  }
}

@media (max-width: 700px){
  body.about-combined-page .principals-grid-centered{
    gap: 24px;
  }

  body.about-combined-page .principal-centered{
    width: 100%;
    max-width: 420px;
    padding: 22px 18px 56px;
  }
}
/* =====================================================
   9. PAGE SETTINGS — IMPACT (impact.html)
   ===================================================== */

body.impact-page{
  background: #ffffff !important;
}
body.impact-page .impact-main{
  min-height: auto;
  padding-top: 140px;
}

body.impact-page .impact-panel{
  width: 100%;
  background: url("../images/background.3.png") no-repeat center center;
  background-size: cover;
  height: 660px;
  display: flex;
  align-items: flex-start;
}

body.impact-page .impact-grid{
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 70px;
  align-items: start;
  max-width: 1100px;
  width: 100%;
  height: 100%;
  padding-top: 100px;
}

body.impact-page .impact-image{
  display: flex;
  justify-content: flex-start;  
  align-items: flex-start;
  align-self: start;
  margin-top: 14px;
  margin-left: -80px;          
}

body.impact-page .impact-image img{
  width: 500px;
  max-width: none;
  height: auto;
  display: block;
}

body.impact-page .impact-content{
  padding-top: 65px;
  color: #222;
}

body.impact-page .impact-content h2{
  color: #111;
}


body.impact-page .impact-content p{
  margin: 0 0 28px 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
  color: #222;
  text-align: left;
  max-width: 760px;
}

body.impact-page footer{
  position: relative;
  z-index: 2;
  background: #ffffff;
}

@media (max-width: 900px){
  body.impact-page .impact-panel{
    min-height: auto;
    padding-bottom: 40px;
    overflow: hidden;
  }

  body.impact-page .impact-grid{
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 32px;
  }

  body.impact-page .impact-image{
    justify-content: flex-start;
    margin-left: 0;
    margin-top: 0;
  }

  body.impact-page .impact-image img{
    width: min(55vw, 240px);
    max-width: 240px;
    height: auto;
  }

  body.impact-page .impact-content{
    padding-top: 0;
  }
}
/* ===== Impact Page — Body Sections (New) ===== */

/* Section spacing */
body.impact-page .impact-commitments,
body.impact-page .impact-purpose-section,
body.impact-page .impact-closing-section{
  padding: 56px 0;
}

/* Intro block — keep centered */
body.impact-page .impact-section-intro{
  max-width: 900px;
  margin: 0 auto 46px;
  text-align: center;
}

body.impact-page .impact-section-intro h2{
  color: #111;
}

body.impact-page .impact-section-intro p{
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(13,15,18,.72);
}


body.impact-page .commitments-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
}

body.impact-page .commitment-card{
  text-align: left;
}

body.impact-page .commitment-media{
  margin-bottom: 18px;
}

body.impact-page .commitment-media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

body.impact-page .commitment-card h3{
 color: #111111;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 700;
}

body.impact-page .commitment-card p{
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(13,15,18,.78);
}

/* Purpose section */
body.impact-page .purpose-block{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

body.impact-page .purpose-text h2{
}

body.impact-page .purpose-text p{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
}

body.impact-page .purpose-image img{
  width: 100%;
  border-radius: 16px;
}

/* Closing statement */
body.impact-page .impact-closing-text{
  max-width: 780px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid #e0e8dc;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(13,15,18,.72);
}

/* Responsive */
@media (max-width: 900px){
  body.impact-page .commitments-list{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  body.impact-page .commitment-media img{
    height: auto;
  }

  body.impact-page .commitment-card h3{
    font-size: 24px;
  }

  body.impact-page .purpose-block{
    grid-template-columns: 1fr;
  }
}

/* Closing statement */
body.impact-page .impact-closing-text{
  max-width: 780px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid #e0e8dc;
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(13,15,18,.72);
}


/* =====================================================
   10. PAGE SETTINGS — SERVICES (services.html)
   ===================================================== */

body.page-services .topbar{
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.page-services .services-main{
  padding-top: 0;
  scroll-snap-type: y proximity;
}

body.page-services .services-main > section{
  scroll-snap-align: start;
}

/* ---------- First page / hero panel ---------- */

body.page-services .services-hero-panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-bottom: 0;
  margin-top: -20px;
}

body.page-services .services-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}

body.page-services .services-hero-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

body.page-services .services-hero-art{
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

body.page-services .services-hero-art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.page-services .services-hero-copy{
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 10%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
}

body.page-services .hero-half{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

body.page-services .hero-left{
  text-align: right;
  padding-right: 40px;
  color: rgba(0,0,0,.92);
}

body.page-services .hero-right{
  text-align: left;
  padding-left: 40px;
  color: rgba(255,255,255,.95);
}

body.page-services .services-hero-copy h2{
  margin: 0;
}

body.page-services .services-hero-intro{
  background: #ffffff;
  padding: 0;
}

body.page-services .services-hero-intro-inner{
  max-width: 1100px;
}

body.page-services .services-hero-intro p{
  margin: 0;
  max-width: 420px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,.92);
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px){

  body.page-services .services-hero-copy{
    max-width: 100%;
    padding: 0 24px;
  }

}

/* Tablet + small screens (stack layout) */
@media (max-width: 768px){

  body.page-services .services-hero-copy{
    grid-template-columns: 1fr;
    left: 5%;
    right: 5%;
    transform: none;
    max-width: 100%;
    text-align: right;
  }

  body.page-services .hero-left{
    text-align: right;
    padding-right: 0;
  }

  body.page-services .hero-right{
    padding-left: 0;
  }

  body.page-services .services-hero-intro{
    padding: 12px 0 0;
  }

  body.page-services .services-hero-intro p{
    max-width: 100%;
  }

}

/* Mobile */
@media (max-width: 640px){

  body.page-services .services-hero-panel{
    margin-top: 0;
  }

  body.page-services .services-hero-copy{
    left: 5%;
    right: 5%;
    padding: 0;
  }

  body.page-services .services-hero-intro{
    padding: 10px 0 0;
  }

  body.page-services .services-hero-intro p{
    font-size: 16px;
    line-height: 1.6;
  }
}

/* ---------- White space + heading after hero ---------- */

body.page-services .services-intro-spacer{
  background: #ffffff;
  padding: 72px 0 20px;
}

body.page-services .services-intro-block{
  max-width: 1100px;
}

body.page-services .services-intro-block .kicker{
  margin-bottom: 12px;
}

body.page-services .services-intro-block h2{
  margin: 0;
}
.services-intro {
  text-align: center;
}

/* ---------- Existing services content ---------- */

body.page-services .service-split{
  padding: 46px 0;
}

body.page-services .split-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 42px;
  align-items: start;
}

body.page-services .service-split.flip .split-grid{
  grid-template-columns: .9fr 1.1fr;
}

body.page-services .service-split.flip .split-text{
  order: 2;
}

body.page-services .service-split.flip .split-media{
  order: 1;
}

body.page-services .split-text h2{
  margin: 0 0 14px 0;
}

body.page-services .split-text p{
  line-height: 1.8;
}

body.page-services .split-text ul{
  margin: 14px 0 0 0;
  padding-left: 18px;
}

body.page-services .split-text li{
  margin: 10px 0;
  line-height: 1.7;
}

body.page-services .split-media{
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: none;
}

body.page-services .split-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) and (min-width: 769px){
  body.page-services .services-hero-panel{
    min-height: auto;
    margin-top: -20px;
  }

  body.page-services .services-hero-art{
    height: 60vh;
  }

  body.page-services .services-hero-copy{
    left: 50%;
    right: auto;
    bottom: 8%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    padding: 0 32px;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  body.page-services .hero-left{
    text-align: right;
    padding-right: 24px;
  }

  body.page-services .hero-right{
    text-align: left;
    padding-left: 24px;
  }

  body.page-services .hero-right p{
    max-width: 420px;
    margin-top: 12px;
  }
}

@media (max-width: 900px){
  body.page-services .services-hero-panel{
    min-height: 480px;
  }

  body.page-services .services-hero-art{
    height: 60vh;
  }

  body.page-services .services-hero-copy{
    left: 50%;
    right: auto;
    bottom: 6%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  body.page-services .hero-left{
    text-align: right;
    padding-right: 20px;
  }

  body.page-services .hero-right{
    text-align: left;
    padding-left: 20px;
  }

  body.page-services .services-hero-copy p{
    max-width: 32ch;
  }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  body.page-services .services-hero-panel{
    min-height: auto;
    margin-top: -20px;
  }

  body.page-services .services-hero-art{
    height: 62vh;
  }

  body.page-services .services-hero-copy{
    left: 50%;
    right: auto;
    bottom: 7%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    padding: 0 28px;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  body.page-services .hero-left{
    text-align: right;
    padding-right: 18px;
  }

  body.page-services .hero-right{
    text-align: left;
    padding-left: 18px;
  }

  body.page-services .services-hero-copy h2{
    font-size: clamp(24px, 3.2vw, 40px);
    line-height: 1.12;
  }

  body.page-services .hero-right p{
    max-width: 320px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (max-width: 640px){
  body.page-services .services-hero-panel{
    min-height: 360px;
  }

  body.page-services .services-hero-art img{
    height: 50vh;
  }

  body.page-services .services-hero-copy{
    left: 5%;
    right: 5%;
    bottom: 5%;
    width: auto;
  }

  body.page-services .services-hero-copy p{
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
    max-width: 28ch;
  }
}

/* =====================================================
   SERVICES SHOWCASE — FIXED LEFT CONTENT + INTERACTIVE RIGHT PANELS
   ===================================================== */

body.page-services .services-showcase{
  background: #ffffff;
  color: #0d0f12;
  padding: 40px 0 32px; /* this set the space bt. section 2 bottom white space */
  overflow: hidden;
  margin-top: 24px; /* this set the white space between the two sections */
  border-top: 1px solid rgba(13,15,18,0.06);
  border-bottom: 1px solid rgba(13,15,18,0.06);
}

body.page-services .services-showcase-shell{
  max-width: 1440px;
}

body.page-services .services-showcase-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(13,15,18,.92);
}

body.page-services .services-showcase-icon{
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(13,15,18,.85) 0%, rgba(13,15,18,.18) 100%);
}

body.page-services .services-showcase-layout{
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 42px;
  align-items: stretch;
}

/* LEFT FIXED CONTENT */
body.page-services .services-showcase-content{
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  padding: 0 12px 18px 0;
}

body.page-services .services-content-item{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  pointer-events: none;
}

body.page-services .services-content-item.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

body.page-services .services-content-item h2{
  color: #0d0f12;
  font-weight: 700;
  max-width: 520px;
  margin-bottom: 24px
}

body.page-services .services-content-item p{
  margin: 0 0 28px;
  max-width: 420px;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(13,15,18,.72);
}

body.page-services .service-editorial-points{
  margin: 0 0 28px;
  max-width: 430px;
}

body.page-services .service-points-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(13,15,18,.58);
}

body.page-services .service-editorial-points ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-weight: 300
}

body.page-services .service-editorial-points li{
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(13,15,18,.78);
}

body.page-services .service-editorial-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 8px;
  border-radius: 999px;
  background: rgba(13,15,18,.72);
  transform: translateY(-50%);
}
/* Shared brief bullet mapping across service rails */
:root{
  --map-1: #192338; /* macro / feasibility / jurisdictional */
  --map-2: #01A3CB; /* partner / intermediary / target */
  --map-3: #01C7F8; /* regulatory / structuring / support */
  --map-4: #7C8594; /* operations / governance / growth */
  --map-5: #D9E1F1; /* transaction / capital / financial */
}

/* Services page: color-coded brief bullets */
body.page-services .service-editorial-points li.map-1::before{
  background: var(--map-1);
}

body.page-services .service-editorial-points li.map-2::before{
  background: var(--map-2);
}

body.page-services .service-editorial-points li.map-3::before{
  background: var(--map-3);
}

body.page-services .service-editorial-points li.map-4::before{
  background: var(--map-4);
}

body.page-services .service-editorial-points li.map-5::before{
  background: var(--map-5);
}

body.page-services .service-panel-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 220px;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(13,15,18,.16);
  background: #ffffff;
  color: #0d0f12;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
/* Service detail page: brief-to-detail marker chips */
body.service-detail-page .detail-bullet-tags{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

body.service-detail-page .bullet-chip{
  display: inline-block;
  width: 5px;
  height: 0.8em;
  border-radius: 2px;
  transform: translateY(1px);
}

body.service-detail-page .heading-with-marker{
  display: flex;
  align-items: center;
  gap: 10px;
}

body.service-detail-page .heading-marker{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px; /* 👈 THIS controls the space bt. last letter and bar */
}

body.service-detail-page .bullet-chip.map-1{ background: var(--map-1); }
body.service-detail-page .bullet-chip.map-2{ background: var(--map-2); }
body.service-detail-page .bullet-chip.map-3{ background: var(--map-3); }
body.service-detail-page .bullet-chip.map-4{ background: var(--map-4); }
body.service-detail-page .bullet-chip.map-5{ background: var(--map-5); }

body.page-services .service-panel-btn:hover{
  background: #f5f5f5;
  border-color: rgba(13,15,18,.28);
  transform: translateY(-1px);
}

/* RIGHT SIDE */
body.page-services .services-showcase-right{
  min-width: 0;
}

body.page-services .services-showcase-viewport{
  overflow: hidden;
}

body.page-services .services-showcase-grid{
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: 640px;
  transition: transform .45s ease;
  will-change: transform;
}

body.page-services .service-panel{
  position: relative;
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  min-height: auto; /* remove forced tall panels 620px to auto */
  border-right: 1px solid rgba(13,15,18,.10);
  overflow: hidden;
  cursor: pointer;
  opacity: .72;
  transition: flex-basis .25s ease, width .25s ease;
  outline: none;
}

body.page-services .service-panel.is-active{
  flex: 0 0 calc(100% - 450px);
  width: calc(100% - 450px);
  min-width: calc(100% - 450px);
  max-width: calc(100% - 450px);
  opacity: 1;
  overflow: visible;
}

body.page-services .service-panel-card{
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .2s ease;
}
body.page-services .service-panel-link{
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

body.page-services .service-panel-overlay-text{
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #0d0f12;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  pointer-events: none;
}

body.page-services .service-panel.is-active:hover .service-panel-overlay-text,
body.page-services .service-panel.is-active:focus-within .service-panel-overlay-text{
  opacity: 1;
  transform: translateY(0);
}

body.page-services .service-panel:hover .service-panel-card,
body.page-services .service-panel:focus-within .service-panel-card{
  transform: translateY(-2px);
}

body.page-services .service-panel-card img{
  filter: grayscale(0%) contrast(1.05);
}

/* COLLAPSED RAILS */
body.page-services .service-panel:not(.is-active) .service-panel-card{
  background: transparent;
}

body.page-services .service-panel:not(.is-active) .service-panel-card img{
  display: none;
}

body.page-services .service-panel:not(.is-active) .service-panel-card-meta{
  position: static;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 18px;
}

body.page-services .service-panel:not(.is-active) .service-panel-card-number{
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: rgba(13,15,18,.34);
}

body.page-services .service-panel:not(.is-active) .service-panel-card-title{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(13,15,18,.62);
  max-width: none;
  white-space: nowrap;
  opacity: 0.75;
}

/* ACTIVE CARD */
body.page-services .service-panel.is-active .service-panel-card{
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: auto; /* remove forced tall panels 560px to auto */
  margin-left: auto;
  border-radius: 24px;
  overflow: hidden;
  background: #111111;
}

body.page-services .service-panel.is-active .service-panel-card img{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

body.page-services .service-panel.is-active .service-panel-card-meta{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72%;
  min-height: 132px;
  background: #ffffff;
  border-top-right-radius: 28px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 22px 18px;
}

body.page-services .service-panel.is-active .service-panel-card-number{
  font-size: 60px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #0d0f12;
  flex-shrink: 0;
  padding-top: 3px;
}

body.page-services .service-panel.is-active .service-panel-card-title{
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  color: #0d0f12;
  max-width: 190px;
}

/* NAVIGATION — ONLY FOR MORE THAN 4 SERVICES */
/* Rail chevron arrows — overlaid on viewport, appear on hover */
body.page-services .services-showcase-viewport{
  position: relative;
}

body.page-services .services-rail-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border: none;
  background: transparent;
  width: 28px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}

body.page-services .services-showcase-viewport:hover .services-rail-arrow{
  opacity: .88;
}

body.page-services .services-rail-arrow:hover{
  opacity: 1 !important;
}

body.page-services .services-rail-arrow:disabled{
  opacity: 0 !important;
  cursor: default;
}

body.page-services .services-rail-arrow-prev{
  left: 8px;
}

body.page-services .services-rail-arrow-next{
  right: 8px;
}

/* Hide arrows on desktop/laptop — only show on touch devices (iPad) */
@media (hover: hover) and (pointer: fine){
  body.page-services .services-rail-arrow{
    display: none !important;
  }
}

/* Chevron hint on right edge of active panel when panel 4 is active */
/* Drag hint span on panel 4 */
body.page-services .service-panel-drag-hint{
  display: none;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
  /* Safari fix: explicit height anchors the vertical text correctly */
  height: 160px;
  overflow: visible;
}

body.page-services .service-panel.is-active .service-panel-drag-hint{
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1440px){
  body.page-services .service-panel-drag-hint{
    display: none !important;
  }
}

/* RESPONSIVE */
@media (min-width: 1600px){
  body.page-services .services-showcase-shell{
    max-width: 1600px;
  }

  body.page-services .service-panel.is-active{
    flex: 0 0 calc(100% - 600px);
    width: calc(100% - 600px);
    min-width: calc(100% - 600px);
    max-width: calc(100% - 600px);
  }
}

@media (max-width: 1280px){
  body.page-services .services-showcase-layout{
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 30px;
  }

  body.page-services .services-showcase-content{
    min-height: 580px;
  }

  body.page-services .services-showcase-grid{
    min-height: 580px;
  }

body.page-services .service-panel{
  flex: 0 0 130px;
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  min-height: 580px;
}

body.page-services .service-panel.is-active{
  flex: 0 0 calc(100% - 390px);
  width: calc(100% - 390px);
  min-width: calc(100% - 390px);
  max-width: calc(100% - 390px);
}

  body.page-services .service-panel.is-active .service-panel-card{
    min-height: 600px;
    max-width: 360px;
  }

  body.page-services .service-panel.is-active .service-panel-card img{
    min-height: 500px;
  }

  body.page-services .service-panel:not(.is-active) .service-panel-card-number{
    font-size: 48px;
  }
}

@media (max-width: 1024px){
  body.page-services .services-showcase{
    padding: 56px 0 64px;
  }

  body.page-services .services-showcase-layout{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.page-services .services-showcase-content{
    min-height: auto;
    padding: 0;
    display: block;
  }

  body.page-services .services-content-item{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    opacity: 0;
    visibility: hidden;
    transform: none;
    height: 0;
    overflow: hidden;
  }

  body.page-services .services-content-item.is-active{
    opacity: 1;
    visibility: visible;
    height: auto;
  }

  body.page-services .services-content-item h2,
  body.page-services .services-content-item p,
  body.page-services .service-editorial-points li{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.page-services .services-showcase-viewport{
    overflow: visible;
  }

  body.page-services .services-showcase-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: auto;
    transform: none !important;
  }

  body.page-services .service-panel,
  body.page-services .service-panel.is-active{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    border-right: none;
    border-bottom: none;
    opacity: 1;
    flex: none;
  }

  body.page-services .service-panel .service-panel-card,
  body.page-services .service-panel.is-active .service-panel-card,
  body.page-services .service-panel:not(.is-active) .service-panel-card{
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 420px;
    margin-left: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #111111;
  }

  body.page-services .service-panel .service-panel-card img,
  body.page-services .service-panel.is-active .service-panel-card img,
  body.page-services .service-panel:not(.is-active) .service-panel-card img{
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
  }

  body.page-services .service-panel .service-panel-overlay-text{
    top: 18px;
    right: 18px;
    opacity: 1;
    transform: none;
  }

  body.page-services .service-panel .service-panel-card-meta,
  body.page-services .service-panel.is-active .service-panel-card-meta,
  body.page-services .service-panel:not(.is-active) .service-panel-card-meta{
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(76%, calc(100% - 20px));
    min-height: 116px;
    height: auto;
    background: #ffffff;
    border-top-right-radius: 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 24px 22px 20px;
  }

  body.page-services .service-panel .service-panel-card-number,
  body.page-services .service-panel.is-active .service-panel-card-number,
  body.page-services .service-panel:not(.is-active) .service-panel-card-number{
    font-size: 52px;
    line-height: 1;
    color: #0d0f12;
  }

  body.page-services .service-panel .service-panel-card-title,
  body.page-services .service-panel.is-active .service-panel-card-title,
  body.page-services .service-panel:not(.is-active) .service-panel-card-title{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;
    font-size: 18px;
    line-height: 1.2;
    color: #0d0f12;
    max-width: 14ch;
    white-space: normal;
    opacity: 1;
  }

  body.page-services .service-panel.is-active .service-panel-card{
    box-shadow: 0 14px 34px rgba(0,0,0,.08);
  }

  body.page-services .services-showcase-nav{
    display: none !important;
  }
}

@media (max-width: 640px){
  body.page-services .services-showcase-label{
    margin-bottom: 24px;
    font-size: 13px;
  }

  body.page-services .services-content-item h2{
    font-size: 30px;
  }

  body.page-services .services-content-item p{
    font-size: 18px;
  }

  body.page-services .service-panel-btn{
    min-width: 100%;
  }

  body.page-services .service-panel .service-panel-card,
  body.page-services .service-panel.is-active .service-panel-card,
  body.page-services .service-panel:not(.is-active) .service-panel-card{
    min-height: 340px;
    border-radius: 20px;
  }

  body.page-services .service-panel .service-panel-card img,
  body.page-services .service-panel.is-active .service-panel-card img,
  body.page-services .service-panel:not(.is-active) .service-panel-card img{
    height: 340px;
    min-height: 340px;
  }

  body.page-services .service-panel .service-panel-overlay-text{
    top: 14px;
    right: 14px;
    padding: 8px 12px;
    font-size: 10px;
  }

  body.page-services .service-panel .service-panel-card-meta,
  body.page-services .service-panel.is-active .service-panel-card-meta,
  body.page-services .service-panel:not(.is-active) .service-panel-card-meta{
    width: min(82%, calc(100% - 22px));
    min-height: 96px;
    gap: 14px;
    padding: 18px 18px 16px;
    border-top-right-radius: 22px;
  }

  body.page-services .service-panel .service-panel-card-number,
  body.page-services .service-panel.is-active .service-panel-card-number,
  body.page-services .service-panel:not(.is-active) .service-panel-card-number{
    font-size: 42px;
  }

  body.page-services .service-panel .service-panel-card-title,
  body.page-services .service-panel.is-active .service-panel-card-title,
  body.page-services .service-panel:not(.is-active) .service-panel-card-title{
    max-width: 12ch;
    font-size: 18px;
  }
}
/* =====================================================
   10A. PAGE SETTINGS — SERVICE DETAIL TEMPLATE
   ===================================================== */

body.service-detail-page{
  background: #ffffff !important;
}

body.service-detail-page .topbar{
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.service-detail-page .service-detail-main{
  padding-top: 72px;
}

body.service-detail-page .service-detail-hero{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.service-detail-page .service-detail-hero-card{
  position: relative;
  width: 100%;
  height: clamp(360px, 52vh, 620px);
  min-height: 320px;
  overflow: hidden;
  border-radius: 0;
  background: #111111;
}

body.service-detail-page .service-detail-hero-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

body.service-detail-page .service-detail-hero-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}

body.service-detail-page .service-detail-hero-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0));
}

body.service-detail-page .service-detail-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.50);
  color: #111111;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

body.service-detail-page .service-detail-cta:hover{
  background: #ffffff;
  border-color: rgba(255,255,255,.5);
  transform: translateY(-1px);
}

/* body text distance from the image */
body.service-detail-page .service-detail-body{
  padding: 30px 0 32px;
}

body.service-detail-page .service-detail-shell{
  max-width: 1100px;
}

body.service-detail-page .service-detail-kicker{
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(13,15,18,.52);
}

body.service-detail-page .service-detail-title{
  margin: 0 0 24px;
  font-size: clamp(24px, 4.6vw, 38px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0;
  color: #111111;
  max-width: 980px;
}

body.service-detail-page .service-detail-content{
  max-width: 750px;
  margin-left: 0;
  margin-right: auto;
}

body.service-detail-page .service-detail-content > *:first-child{
  margin-top: 0;
}

body.service-detail-page .service-detail-content h2{
  margin: 34px 0 14px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: #111111;
}

body.service-detail-page .service-detail-content h3{
  margin: 26px 0 12px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #111111;
}

body.service-detail-page .service-detail-content p{
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.88;
  color: rgba(13,15,18,.84);
  text-align: justify;
}

body.service-detail-page .service-detail-content ul{
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: 700px;
  margin-left: 0;
  margin-right: auto;
}

body.service-detail-page .service-detail-content li{
  position: relative;
  padding-left: 17px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.88;
  color: rgba(13,15,18,.84);
  text-align: justify;
  text-justify: inter-word;
}

body.service-detail-page .service-detail-content li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(13,15,18,.84);
  transform: translateY(-50%);
}

body.service-detail-page .service-detail-back{
  margin-top: 34px;
}

body.service-detail-page .service-detail-back a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: #111111;
  text-decoration: none;
}

body.service-detail-page .service-detail-back a:hover{
  opacity: .72;
}

body.service-detail-page .service-related{
  padding: 30px 0 72px;
}

body.service-detail-page .service-related-intro{
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

body.service-detail-page .service-related-intro h2{
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  color: #111111;
}

body.service-detail-page .service-related-intro p{
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(13,15,18,.84);
}

body.service-detail-page .service-related-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
}

body.service-detail-page .service-related-card{
  text-decoration: none;
  color: inherit;
  display: block;
}

body.service-detail-page .service-related-media{
  margin-bottom: 18px;
  overflow: hidden;
}

body.service-detail-page .service-related-media img{
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

body.service-detail-page .service-related-card h3{
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.02;
  font-weight: 700;
  text-transform: uppercase;
  color: #111111;
}

body.service-detail-page .service-related-card p{
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(13,15,18,.78);
}

body.service-detail-page .service-related-card:hover{
  opacity: .92;
}

@media (max-width: 1024px){
  body.service-detail-page .service-related-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body.service-detail-page .service-detail-main{
    padding-top: 64px;
  }

  body.service-detail-page .service-detail-hero-card{
    height: 300px;
  }

  body.service-detail-page .service-detail-hero-overlay{
    padding: 18px;
  }

  body.service-detail-page .service-detail-cta{
    width: 100%;
    min-width: 0;
  }

  body.service-detail-page .service-detail-title{
    font-size: clamp(30px, 9vw, 42px);
  }

  body.service-detail-page .service-detail-content p,
  body.service-detail-page .service-detail-content li{
    font-size: 15px;
    line-height: 1.8;
  }

  body.service-detail-page .service-related-grid{
    grid-template-columns: 1fr;
  }

  body.service-detail-page .service-related-card h3{
    font-size: 24px;
  }
}
/* =====================================================
   10B. SHARED SERVICE DETAIL — SPLIT LAYOUT & DIVIDER NAV
   ===================================================== */

body.service-detail-page .service-split-section{
  padding: 0 0 8px;
}

body.service-detail-page .service-split-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 250px;
  gap: 42px;
  align-items: start;
}

body.service-detail-page .service-main{
  min-width: 0;
}

body.service-detail-page .service-side{
  padding-left: 24px;
  border-left: 1px solid rgba(13,15,18,.14);
  align-self: start;
}

body.service-detail-page .service-divider-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 110px;
}

body.service-detail-page .service-divider-list p{
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(13,15,18,.72);
  font-weight: 400;
}

body.service-detail-page .service-divider-list a{
  display: block;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(13,15,18,.78);
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}

body.service-detail-page .service-divider-list a:hover{
  opacity: .55;
  transform: translateX(2px);
}

body.service-detail-page .service-divider-list a.active{
  font-weight: 700;
  color: #0d0f12;
}

/* PROOF POINTS */
body.service-detail-page .service-proof-points{
  margin: 40px 0 56px;
  padding-left: 18px;
  border-left: 2px solid rgba(13,15,18,.18);
}

body.service-detail-page .service-proof-points ul{
  margin: 0;
  padding-left: 18px;
}

body.service-detail-page .service-proof-points li{
  margin-bottom: 14px;
  line-height: 1.8;
}

body.service-detail-page .service-proof-points li:last-child{
  margin-bottom: 0;
}

/* SECTION INTRO */
body.service-detail-page .service-section-intro{
  margin: 56px 0 28px;
}

body.service-detail-page .service-section-intro h2{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(13,15,18,.55);
}

/* CONTENT BLOCKS */
body.service-detail-page .service-detail-block{
  margin: 0 0 38px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(13,15,18,.08);
  scroll-margin-top: 110px;
}

body.service-detail-page .service-detail-block:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

/* Smooth scroll */
html{
  scroll-behavior: smooth;
}

/* Responsive */
@media (max-width: 900px){
  body.service-detail-page .service-split-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.service-detail-page .service-side{
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid rgba(13,15,18,.14);
  }

  body.service-detail-page .service-divider-list{
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* ----------------------------------------
   CONTENT ENHANCEMENTS (MATCHES GRC STYLE)
---------------------------------------- */

/* PROOF POINTS (your 3 bullets) */
body.service-detail-page .service-proof-points{
  margin: 40px 0 56px;
  padding-left: 18px;
  border-left: 2px solid rgba(13,15,18,.18);
}

body.service-detail-page .service-proof-points ul{
  margin: 0;
  padding-left: 18px;
}

body.service-detail-page .service-proof-points li{
  margin-bottom: 14px;
  line-height: 1.8;
}

body.service-detail-page .service-proof-points li:last-child{
  margin-bottom: 0;
}

/* SECTION INTRO */
body.service-detail-page .service-section-intro{
  margin: 56px 0 28px;
}

body.service-detail-page .service-section-intro h2{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(13,15,18,.55);
}

/* CONTENT BLOCKS */
body.service-detail-page .service-detail-block{
  margin: 0 0 38px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(13,15,18,.08);
}

body.service-detail-page .service-detail-block:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

/* RESPONSIVE */
@media (max-width: 900px){
  body.service-detail-page .service-split-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.service-detail-page .service-side{
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid rgba(13,15,18,.14);
  }

  body.service-detail-page .service-divider-list{
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* =====================================================
   11. PAGE SETTINGS — PERSPECTIVES (perspectives.html)
   ===================================================== */

body.page-perspectives{
  background: #ffffff;
  padding-top: 72px;
}

body.page-perspectives .topbar{
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.page-perspectives .topbar .brand,
body.page-perspectives .topbar .navlinks a,
body.page-perspectives .topbar .hamburger{
  color: var(--text) !important;
}

body.page-perspectives .topbar .hamburger span,
body.page-perspectives .topbar .hamburger span:before,
body.page-perspectives .topbar .hamburger span:after{
  background: var(--text) !important;
}

body.page-perspectives .persp-main{
  padding: 26px 0 72px;
}

body.page-perspectives .perspectives-filters{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr) minmax(160px, .7fr) minmax(180px, .8fr);
  gap: 14px;
  margin-bottom: 34px;
  align-items: center;
}

body.page-perspectives .filter-control{
  position: relative;
}

body.page-perspectives .filter-input,
body.page-perspectives .filter-select{
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(44,62,80,.08);
  border-radius: 12px;
  background: #f5f5f5;
  color: rgba(44,62,80,.78);
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
  outline: none;
}

body.page-perspectives .filter-input{
  padding-left: 44px;
}

body.page-perspectives .filter-control.search::before{
  content: "⌕";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: rgba(44,62,80,.45);
  pointer-events: none;
}

body.page-perspectives .filter-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

body.page-perspectives .filter-control.select::after{
  content: "⌄";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-48%);
  font-size: 13px;
  color: rgba(44,62,80,.45);
  pointer-events: none;
}

body.page-perspectives .filter-input:focus,
body.page-perspectives .filter-select:focus{
  border-color: rgba(44,62,80,.18);
  background: #f1f1f1;
}

body.page-perspectives .perspectives-shell{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) minmax(240px, .75fr);
  gap: 26px;
  align-items: start;
}

body.page-perspectives .perspectives-column{
  display: grid;
  gap: 26px;
  align-content: start;
}

body.page-perspectives .article-card{
  display: block;
  color: inherit;
  text-decoration: none;
}

body.page-perspectives .article-card:hover{
  opacity: 1;
}

body.page-perspectives .article-media{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f2f2f0;
  margin-bottom: 20px;
}

body.page-perspectives .article-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: transform .28s ease;
}

body.page-perspectives .article-card:hover .article-media img{
  transform: scale(1.015);
}

body.page-perspectives .article-card.featured .article-media{
  aspect-ratio: 0.78 / 1;
}

body.page-perspectives .article-card.standard .article-media{
  aspect-ratio: 1.08 / 0.82;
}

body.page-perspectives .article-card.tall .article-media{
  aspect-ratio: 0.74 / 1;
}

body.page-perspectives .article-kicker{
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(44,62,80,.58);
}

body.page-perspectives .article-card h2,
body.page-perspectives .article-card h3{
  margin: 0 0 12px;
  color: #111111;
  font-family: var(--font-family-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}

body.page-perspectives .article-card.featured h2{
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
}

body.page-perspectives .article-card.standard h3,
body.page-perspectives .article-card.tall h3{
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.18;
}

body.page-perspectives .article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(44,62,80,.72);
}

body.page-perspectives .article-author{
  font-weight: 400;
}

body.page-perspectives .article-date{
  font-weight: 300;
}

body.page-perspectives .article-author::after{
  content: "•";
  margin-left: 8px;
  color: rgba(44,62,80,.42);
}

body.page-perspectives .perspectives-empty{
  display: none;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(44,62,80,.72);
}

body.page-perspectives .perspectives-empty.is-visible{
  display: block;
}

@media (max-width: 1080px){
  body.page-perspectives .perspectives-filters{
    grid-template-columns: 1fr 1fr;
  }

  body.page-perspectives .perspectives-shell{
    grid-template-columns: 1.2fr .8fr;
  }

  body.page-perspectives .perspectives-column:last-child{
    grid-column: 2;
  }

  body.page-perspectives .article-card.featured h2{
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.1;
  }

  body.page-perspectives .article-card.standard h3,
  body.page-perspectives .article-card.tall h3{
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.2;
  }
}

@media (max-width: 760px){
  body.page-perspectives{
    padding-top: 72px;
  }

  body.page-perspectives .persp-main{
    padding: 22px 0 56px;
  }

  body.page-perspectives .perspectives-filters{
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 26px;
  }

  body.page-perspectives .perspectives-shell{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body.page-perspectives .perspectives-column{
    gap: 22px;
  }

  body.page-perspectives .perspectives-column:last-child{
    grid-column: auto;
  }

  body.page-perspectives .article-card.featured .article-media,
  body.page-perspectives .article-card.standard .article-media,
  body.page-perspectives .article-card.tall .article-media{
    aspect-ratio: 16 / 9;
    height: auto;
  }

  body.page-perspectives .article-card.featured h2{
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.12;
  }

  body.page-perspectives .article-card.standard h3,
  body.page-perspectives .article-card.tall h3{
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.22;
  }
}


/* =====================================================
   11A. ARTICLE SETTINGS — PERSPECTIVES (perspectives.html)
   ===================================================== */

body.article-perspectives-page{
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.article-perspectives-page .topbar{
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.article-perspectives-page .topbar .brand,
body.article-perspectives-page .topbar .navlinks a,
body.article-perspectives-page .topbar .hamburger{
  color: var(--text) !important;
}

body.article-perspectives-page .topbar .hamburger span,
body.article-perspectives-page .topbar .hamburger span:before,
body.article-perspectives-page .topbar .hamburger span:after{
  background: var(--text) !important;
}

body.article-perspectives-page .ap-main{
  padding: 76px 0 72px;
}

body.article-perspectives-page .ap-intro-shell{
  padding: 14px 0 0;
}

body.article-perspectives-page .ap-intro-wrap{
  text-align: center;
}

body.article-perspectives-page .ap-kicker,
body.article-perspectives-page .ap-meta,
body.article-perspectives-page .ap-sidebar,
body.article-perspectives-page .ap-back,
body.article-perspectives-page .ap-share{
  font-family: "Inter", var(--font-family-base);
}

body.article-perspectives-page .ap-kicker{
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(44,62,80,.68);
}

body.article-perspectives-page .ap-title{
  margin: 0 auto;
  max-width: 920px;
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(32px, 4.2vw, 44px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: .02em;
  color: #1f1f1d;
  text-wrap: balance;
}

body.article-perspectives-page .ap-meta{
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(44,62,80,.72);
  text-transform: uppercase;
  letter-spacing: .08em;
}

body.article-perspectives-page .ap-share{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

body.article-perspectives-page .ap-share-label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(44,62,80,.72);
}

body.article-perspectives-page .ap-share-copy,
body.article-perspectives-page .ap-share-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(31,31,29,.12);
  background: transparent;
  color: #1f1f1d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.article-perspectives-page .ap-share-copy:hover,
body.article-perspectives-page .ap-share-link:hover{
  opacity: 1;
  background: rgba(31,31,29,.03);
}

body.article-perspectives-page .ap-hero-shell{
  padding: 30px 0 0;
}

body.article-perspectives-page .ap-hero{
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #ece8df;
}

body.article-perspectives-page .ap-hero img{
  width: 100%;
  height: clamp(260px, 33vw, 420px);
  object-fit: cover;
  object-position: center;
}

body.article-perspectives-page .ap-body-shell{
  padding: 34px 0 0;
}

body.article-perspectives-page .ap-article-grid{
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

body.article-perspectives-page .ap-sidebar{
  position: sticky;
  top: 92px;
  padding-top: 0;
}

body.article-perspectives-page .ap-sidebar-group{
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(31,31,29,.10);
}

body.article-perspectives-page .ap-sidebar-group:last-child{
  margin-bottom: 0;
}

body.article-perspectives-page .ap-sidebar-label{
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(44,62,80,.58);
}

body.article-perspectives-page .ap-sidebar-value{
  font-size: 14px;
  line-height: 1.6;
  color: #2b2c29;
}

body.article-perspectives-page .ap-content{
  max-width: 720px;
  min-width: 0;
  font-family: "Inter", var(--font-family-base);
  color: #1f1f1d;
  padding-left: 4px;
}

body.article-perspectives-page .ap-content > *:first-child{
  margin-top: 0;
}

body.article-perspectives-page .ap-content p,
body.article-perspectives-page .ap-content li{
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.92;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #242522;
  text-align: left;
}

body.article-perspectives-page .ap-intro{
  font-size: 17px !important;
  color: #555752 !important;
}

body.article-perspectives-page .ap-rule{
  height: 1px;
  margin: 22px 0 26px;
  background: rgba(31,31,29,.10);
}

body.article-perspectives-page .ap-highlight{
  margin-bottom: 28px !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
  color: #084b6d !important;
  font-weight: 700 !important;
}

body.article-perspectives-page .ap-content h2{
  margin: 38px 0 14px;
  font-family: "Merriweather", Georgia, serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .01em;
  color: #20211f;
}

body.article-perspectives-page .ap-content h3{
  margin: 28px 0 12px;
  font-family: "Merriweather", Georgia, serif;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .01em;
  color: #20211f;
}

body.article-perspectives-page .ap-content .ap-card h3{
  margin: 0 0 8px;
  font-family: "Merriweather", Georgia, serif;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .01em;
  color: #20211f;
}

body.article-perspectives-page .ap-content ul{
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

body.article-perspectives-page .ap-content li{
  position: relative;
  padding-left: 18px;
}

body.article-perspectives-page .ap-content li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #858883;
}

body.article-perspectives-page .ap-content strong{
  color: #21221f;
  font-weight: 700;
}

body.article-perspectives-page .ap-split-note{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  align-items: start;
  margin: 0 0 6px;
}

body.article-perspectives-page .ap-side-image{
  position: relative;
  right: -70px;
  margin: 6px 0 0;
  align-self: start;
}

body.article-perspectives-page .ap-side-image img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

body.article-perspectives-page .ap-side-image img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* floating side quote  */
body.article-perspectives-page .ap-content .ap-quote.ap-quote-float{
  float: right;
  width: 280px;
  margin: 10px 0 24px 32px;
  padding-left: 18px;
  border-left: 2px solid rgba(31,31,29,.15);
  background: none;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

body.article-perspectives-page .ap-content .ap-quote.ap-quote-float p{
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
  color: #084b6d;
  font-weight: 700;
}

/* Allow text to wrap around floating quotes */
body.article-perspectives-page .ap-content .ap-quote.ap-quote-float + *{
  clear: none;
}

/* Prevent headings from wrapping around floating quotes */
body.article-perspectives-page .ap-content h2,
body.article-perspectives-page .ap-content h3{
  clear: both;
}
/* Centered inline quote */
body.article-perspectives-page .ap-content p.ap-quote-inline{
  margin: 48px 0 48px -10px !important; /* top, right, bottom, left */
  padding: 24px 0 !important;
  max-width: 700px !important;

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

  text-align: center !important;
  font-size: 24px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #084b6d !important;
}

body.article-perspectives-page .ap-content p.ap-quote-inline::before,
body.article-perspectives-page .ap-content p.ap-quote-inline::after{
  content: "";
  display: block;
  width: min(420px, 72%);
  height: 1px;
  background: rgba(31,31,29,.14);
}

body.article-perspectives-page .ap-content p.ap-quote-inline::before{
  margin: 0 auto 18px;
}

body.article-perspectives-page .ap-content p.ap-quote-inline::after{
  margin: 18px auto 0;
}

/* Image credit overlay */
.ap-hero {
  position: relative;
}

.ap-image-credit {
  position: absolute;
  bottom: 12px;
  right: 16px;

  font-family: 'Roboto', sans-serif;
  font-size: 7.5pt;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  color: #ffffff;
  text-decoration: none;

  opacity: 0.85;
  transition: opacity .2s ease;
}

.ap-image-credit:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ===== Responsive layout for article quotes ===== */
@media (max-width: 768px) {

  /* Floating side quote becomes full width */
  body.article-perspectives-page .ap-content .ap-quote.ap-quote-float{
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
    padding-left: 16px;
  }

  body.article-perspectives-page .ap-content .ap-quote.ap-quote-float p{
    font-size: 18px;
    line-height: 1.5;
  }

  /* Inline quote scales down cleanly */
  body.article-perspectives-page .ap-content p.ap-quote-inline{
    margin: 32px 0 !important;
    padding: 16px 0 !important;
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
  }
}

body.article-perspectives-page .ap-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 22px 0 12px;
}

body.article-perspectives-page .ap-card{
  padding: 14px 0 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 2px solid rgba(31,31,29,.16);
}

body.article-perspectives-page .ap-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.82;
}

body.article-perspectives-page .ap-closing{
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(31,31,29,.10);
}

body.article-perspectives-page .ap-closing h2{
  font-style: normal;
  font-weight: 700;
}

body.article-perspectives-page .ap-back{
  margin-top: 30px;
}

body.article-perspectives-page .ap-back .link{
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 980px){
  body.article-perspectives-page .ap-article-grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  body.article-perspectives-page .ap-sidebar{
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  body.article-perspectives-page .ap-sidebar-group{
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(31,31,29,.10);
    border-radius: 14px;
  }
}

@media (max-width: 760px){
  body.article-perspectives-page .ap-main{
    padding: 72px 0 56px;
  }

  body.article-perspectives-page .ap-title{
    font-size: clamp(28px, 8vw, 40px);
  }

  body.article-perspectives-page .ap-meta{
    margin-top: 14px;
    font-size: 12px;
  }

  body.article-perspectives-page .ap-share{
    justify-content: flex-start;
  }

  body.article-perspectives-page .ap-hero-shell{
    padding-top: 24px;
  }

  body.article-perspectives-page .ap-hero img{
    height: clamp(220px, 52vw, 300px);
  }

  body.article-perspectives-page .ap-body-shell{
    padding-top: 26px;
  }

  body.article-perspectives-page .ap-cards,
  body.article-perspectives-page .ap-split-note{
    grid-template-columns: 1fr;
  }

  body.article-perspectives-page .ap-sidebar,
  body.article-perspectives-page .ap-split-note,
  body.article-perspectives-page .ap-cards{
    grid-template-columns: 1fr;
  }

  body.article-perspectives-page .ap-content p,
  body.article-perspectives-page .ap-content li,
  body.article-perspectives-page .ap-intro,
  body.article-perspectives-page .ap-highlight{
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

    body.article-perspectives-page .ap-content h2{
    font-size: 24px;
  }

  body.article-perspectives-page .ap-content h3{
    font-size: 19px;
  }

  body.article-perspectives-page .ap-quote p{
    font-size: 20px;
  }
}
body.article-perspectives-page .ap-conversation{
  margin-top: 42px;
  padding: 30px 0 0;
  border-top: 1px solid rgba(31,31,29,.10);
}

body.article-perspectives-page .ap-conversation-inner{
  max-width: 640px;
}

body.article-perspectives-page .ap-conversation-kicker{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(44,62,80,.58);
}

body.article-perspectives-page .ap-conversation h2{
  margin: 0 0 12px;
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  color: #20211f;
}

body.article-perspectives-page .ap-conversation p{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.85;
  color: #242522;
}

body.article-perspectives-page .ap-conversation-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(31,31,29,.14);
  background: transparent;
  color: #1f1f1d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.article-perspectives-page .ap-conversation-btn:hover{
  opacity: 1;
  background: rgba(31,31,29,.03);
}

@media (max-width: 760px){
  body.article-perspectives-page .ap-conversation{
    margin-top: 34px;
    padding-top: 24px;
  }

  body.article-perspectives-page .ap-conversation h2{
    font-size: 24px;
  }

  body.article-perspectives-page .ap-conversation p{
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 32px;
  }

  body.article-perspectives-page .ap-conversation-btn{
    width: 100%;
  }
}

/* =====================================================
   12. PAGE SETTINGS - ARICLE LAYOUT
   ===================================================== */

.article-main{
  padding-top: calc(var(--navbar-height) + 1px);
}
.article-hero{
  height:320px;
  overflow:hidden;
  border-radius: 18px; /*Rounded card style*/
  border: 1px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  margin: 18px 0 22px 0; /*card spacing*/
}

.article-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
}

.article-meta{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.75;
  margin: 10px 0 18px 0;
}
/* =====================================================
   13. PAGE SETTINGS — CONTACT (contact.html)
   ===================================================== */

body.page-contact{
  background: #ffffff;
}

/* Main page layout */
.page-contact .contact-page-main{
  padding-top: 72px;
}

.page-contact .contact-art-layout{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--page-side-padding);
  padding-right: var(--page-side-padding);
  padding-top: 56px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(320px, 1fr);
  gap: 48px;
  align-items: start;
}

/* Left column */
.page-contact .contact-content{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.page-contact .contact-copy{
  max-width: 520px;
}

.page-contact .contact-copy h1{
  margin: 0 0 18px;
  font-size: 56px;
  line-height: 1.02;
  font-weight: 700;
  color: #0d0f12;
}

.page-contact .contact-intro{
  max-width: 420px;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(13,15,18,.70);
}

.page-contact .contact-meta{
  display: grid;
  gap: 18px;
}

.page-contact .contact-meta-block h2{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: #0d0f12;
}

.page-contact .contact-meta-block p{
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(13,15,18,.72);
}

.page-contact .contact-meta-block a{
  color: inherit;
  text-decoration: none;
}

/* Form */
.page-contact .contact-form{
  max-width: 520px;
}

.page-contact .contact-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.page-contact .contact-form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

.page-contact .contact-form .field-full{
  grid-column: 1 / -1;
}

.page-contact .contact-form label{
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(13,15,18,.55);
}

.page-contact .contact-form input,
.page-contact .contact-form textarea{
  width: 100%;
  border: 1px solid rgba(13,15,18,.14);
  border-radius: 0;
  padding: 13px 12px;
  font: inherit;
  color: #0d0f12;
  background: transparent;
  box-shadow: none;
  appearance: none;
}

.page-contact .contact-form textarea{
  min-height: 100px;
  resize: vertical;
}

.page-contact .contact-form button {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font: inherit;
  font-weight: 700 !important;
  color: inherit;
  cursor: pointer;
}

.page-contact .contact-note{
  margin-top: 12px;
  font-size: 14px;
  color: rgba(13,15,18,.65);
}

.page-contact .hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.page-contact .submit-btn{
  font-weight: 700;
  margin-top: 32px;
}

/* Right column artwork */
.page-contact .contact-visual{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 720px;
}

.page-contact .contact-visual-inner{
  width: 100%;
  padding-top: 56px;
}

.page-contact .contact-artwork{
  margin: 0;
  width: 100%;
  max-width: 780px;
  position: relative;
}
.page-contact .image-credit{
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 10px;
  color: #b5b7b5;
  letter-spacing: 0.03em;
}

.page-contact .image-credit a{
  color: #b5b7b5;
  text-decoration: none;
}

.page-contact .image-credit a:hover{
  text-decoration: none;
}

.page-contact .contact-artwork img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
  mix-blend-mode: multiply;
}
/* Position of Office & Email */
.page-contact .contact-meta-right{
  margin-top: 40px;
  max-width: 480px;
}

/* Map */
.page-contact .contact-map iframe{
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(1);
}

/* Responsive */
@media (max-width: 900px){
  .page-contact .contact-art-layout{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
  }

  .page-contact .contact-visual{
    min-height: 0;
  }

  .page-contact .contact-visual-inner{
    padding-top: 0;
  }

  .page-contact .contact-artwork{
    max-width: 620px;
  }

  .page-contact .contact-map iframe{
    height: 360px;
  }
}

@media (max-width: 700px){
  .page-contact .contact-copy h1{
    font-size: 40px;
  }

  .page-contact .contact-form-grid{
    grid-template-columns: 1fr;
  }

  .page-contact .contact-form button{
    width: 100%;
  }
}

/* =====================================================
   14. PAGE SETTINGS — THANK YOU (thank-you.html)
   ===================================================== */

body.page-thankyou{
  background:#ffffff;
  padding-top:72px;
}

.thankyou-wrap{
  max-width:720px;
  margin:0 auto;
  padding:120px 24px 140px;
  text-align:center;
}

.thankyou-title{
  font-size:44px;
  font-weight:700;
  margin-bottom:18px;
  color:#0d0f12;
}

.thankyou-text{
  font-size:18px;
  line-height:1.7;
  color:rgba(13,15,18,.75);
  margin-bottom:40px;
}

.thankyou-actions{
  display:flex;
  justify-content:center;
  gap:16px;
}

.thankyou-actions a{
  display:inline-block;
  padding:12px 22px;
  border:1px solid #0d0f12;
  text-decoration:none;
  font-size:15px;
  color:#0d0f12;
  transition:all .2s ease;
}

.thankyou-actions a.primary{
  background:#0d0f12;
  color:#ffffff;
}

.thankyou-actions a:hover{
  opacity:.85;
}

/* =====================================================
   15. PAGE SETTINGS — LEGAL (terms.html / privacy.html)
   ===================================================== */

body.page-legal{
  background: #ffffff;
  padding-top: 72px;
}

.legal-header{
  position: relative;
  padding: 36px 0 40px;
  min-height: 170px;
  overflow: hidden;
  color: #111111;
}

.legal-header-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.legal-header-inner{
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}

.page-legal .kicker{
  color:#111111;
}

.legal-page-title{
  margin: 8px 0 0 0;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.05;
  color: #111111;
}

.legal-main{
  padding-top: 44px;
}

.legal-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px 70px;
}

.legal-content{
  max-width: 100%;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(13,15,18,.82);
}

.legal-content h2{
  margin: 34px 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #0d0f12;
}

.legal-content p{
  margin: 14px 0;
  text-align: justify;
}

.legal-content ul{
  margin: 10px 0 18px 22px;
}

.legal-updated{
  margin-top: 32px;
}

@media (max-width: 768px){

  .legal-header{
    padding: 28px 0 32px;
    min-height: 140px;
  }

  .legal-page-title{
    font-size: 38px;
  }

  .legal-main{
    padding-top: 34px;
  }

  .legal-content h2{
    font-size: 20px;
  }

}


/* =====================================================
   16. RESPONSIVE BREAKPOINTS
   ===================================================== */


/* ---------- TABLET / SMALL LAPTOP (≤900px) ---------- */

@media (max-width:900px){

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

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

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

  body.page-services .split-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  body.page-services .service-split.flip .split-text,
  body.page-services .service-split.flip .split-media{
    order:initial;
  }

  body.page-contact .contact-layout{
    grid-template-columns:1fr;
    gap:36px;
    padding-top:100px;
  }

  body.page-contact .contact-map iframe{
    height:360px;
  }

}

/* ---------- MOBILE (≤768px) ---------- */

@media (max-width:768px){

  .page-header{
    padding:120px 0 90px;
  }

  .page-subtitle{
    font-size:38px;
  }

  .legal-header{
    padding:28px 0 32px;
    min-height:140px;
  }

  .legal-page-title{
    font-size:38px;
  }

  .legal-main{
    padding-top:34px;
  }

  .legal-content h2{
    font-size:20px;
  }

}

/* ---------- SMALL MOBILE (≤760px) ---------- */

@media (max-width:760px){

  .hero-slide h1,
  .hero-slide h2{
    font-size:48px;
    white-space:normal;
  }

}

/* ---------- DESKTOP NAV DROPDOWN (≥861px) ---------- */


@media (min-width:861px){

  .nav .dropdown:hover .dropdown-menu,
  .nav .dropdown:focus-within .dropdown-menu{
    display:block;
  }

}

/* ---------- Article hero mobile adjustment ---------- */


@media (max-width:760px){
  .article-hero{
    height:260px;
  }
}

/* =====================================================
   MEE / SERVICE DETAIL ACCORDION ENHANCEMENTS
   Cleaned and consolidated to avoid duplicate overrides
   Reusable for other service detail pages with share icons
   ===================================================== */

body.service-detail-page .service-case-list{
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 28px 0 38px;
}

body.service-detail-page .service-case{
  border-top: 1px solid rgba(13,15,18,.12);
  padding-top: 22px;
}

body.service-detail-page .service-case:last-child{
  border-bottom: 1px solid rgba(13,15,18,.12);
  padding-bottom: 22px;
}

body.service-detail-page .service-case summary{
  list-style: none;
  cursor: pointer;
}

body.service-detail-page .service-case summary::-webkit-details-marker{
  display: none;
}

body.service-detail-page .service-case-country,
body.service-detail-page .service-case-kicker,
body.service-detail-page .service-case-title,
body.service-detail-page .service-case-excerpt,
body.service-detail-page .service-case-link{
  display: block;
}

body.service-detail-page .service-anchor-target{
  scroll-margin-top: 130px;
}

/* Country + Case Heading Hierarchy */
body.service-detail-page .service-case-country{
  font-size: clamp(14px, 4.6vw, 28px);
  line-height: 1.0;
  font-weight: 700;
  margin-bottom: 5px;
}

body.service-detail-page .service-case-kicker{
  margin-bottom: 20px;
  color: rgba(181, 139, 42, 1);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.service-detail-page .service-case-title{
  font-size: clamp(8px, 4.6vw, 24px);
  line-height: 1.06;
  font-weight: 700;
  margin-bottom: 10px;
}

body.service-detail-page .service-case-excerpt{
  margin: 0 0 18px;
  padding-left: 0;
  border-left: 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.88;
  font-style: normal;
  color: rgba(13,15,18,.84);
  text-align: justify;
}

body.service-detail-page .service-case-link{
  margin-top: 34px;
  color: #b58b2a;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.service-detail-page .service-case-link::after{
  content: "→";
  margin-left: 10px;
}

body.service-detail-page .service-case[open] .service-case-link{
  display: none;
}

body.service-detail-page .service-case-body{
  padding-top: 2px;
}

body.service-detail-page .service-case-body h4{
  margin: 24px 0 10px;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.service-detail-page .case-close{
  margin-top: 28px;
  padding: 0;
  background: none;
  border: 0;
  color: #b58b2a;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

body.service-detail-page .case-close span{
  margin-left: 8px;
}

body.service-detail-page .service-how-we-work{
  margin: 44px 0 36px;
}



body.service-detail-page .service-footnote{
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(13,15,18,.74);
}

/* Reusable top bar for all service detail pages that use share/email */
body.service-detail-page .service-detail-topbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

body.service-detail-page .service-detail-topbar .service-detail-kicker{
  margin-bottom: 0;
}

body.service-detail-page .service-share{
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  flex-shrink: 0;
}

body.service-detail-page .service-share a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

body.service-detail-page .service-share img{
  width: 22px;
  height: 22px;
  display: block;
}

body.service-detail-page .service-detail-title{
  margin-top: 0;
}

/* Behind the Numbers expandable note + table styling */
body.service-detail-page .service-note{
  margin-top: 28px;
  padding: 0;
  background: none;
  border: 0 !important;
}

body.service-detail-page .service-note summary{
  list-style: none;
  cursor: pointer;
  padding: 0 0 14px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(13,15,18,.78);
}

body.service-detail-page .service-note summary::-webkit-details-marker{
  display: none;
}

body.service-detail-page .service-note summary::after{
  content: " +";
}

body.service-detail-page .service-note[open] summary::after{
  content: " -";
}

body.service-detail-page .service-note-body{
  padding: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(13,15,18,.74);
}

body.service-detail-page .service-note-section{
  margin: 0 0 36px;
}

body.service-detail-page .service-note-section:last-child{
  margin-bottom: 0;
}

body.service-detail-page .service-note-section h5{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: #111111;
}

body.service-detail-page .service-note-table{
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #111111;
  border-bottom: 1px solid #111111;
  margin: 0;
}

body.service-detail-page .service-note-table th,
body.service-detail-page .service-note-table td{
  padding: 9px 10px;
  border-bottom: 1px solid #111111;
  font-size: 14px;
  line-height: 1.35;
  color: #111111;
  vertical-align: top;
  text-align: left;
}

body.service-detail-page .service-note-table thead th{
  font-weight: 700;
}

body.service-detail-page .service-note-table tbody tr:last-child td{
  border-bottom: 0;
}

body.service-detail-page .service-note-table td:last-child,
body.service-detail-page .service-note-table th:last-child{
  text-align: right;
}

body.service-detail-page .service-note-table.is-four-col td:last-child,
body.service-detail-page .service-note-table.is-four-col th:last-child{
  text-align: left;
}

body.service-detail-page .service-note-table tr.is-total td{
  font-weight: 700;
}

body.service-detail-page .service-note-source{
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(13,15,18,.72);
}

@media (max-width: 900px){
  body.service-detail-page .service-case-country{
    font-size: 34px;
  }

  body.service-detail-page .service-case-title{
    font-size: 34px;
  }
}

@media (max-width: 720px){
  body.service-detail-page .service-detail-topbar{
    gap: 16px;
  }

  body.service-detail-page .service-share img{
    width: 20px;
    height: 20px;
  }

  body.service-detail-page .service-note-table th,
  body.service-detail-page .service-note-table td{
    padding: 8px 6px;
    font-size: 12px;
  }
}

/* =====================================================
   ABOUT PAGE — iPhone portrait alignment fixes
   Keeps desktop/tablet layout unchanged
   ===================================================== */
@media (max-width: 480px){
  body.about-combined-page .about-main{
    padding-top: 78px;
    scroll-snap-type: none;
  }

  body.about-combined-page .who-we-are-panel,
  body.about-combined-page .principals-panel{
    min-height: auto;
    align-items: flex-start;
    padding: 36px 0 44px;
  }

  body.about-combined-page .who-we-are-grid,
  body.about-combined-page .principals-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "content";
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  body.about-combined-page .who-we-are-image,
  body.about-combined-page .principals-image{
    justify-content: center;
    align-self: center;
    margin-top: 0;
  }

  body.about-combined-page .who-we-are-image img{
    width: min(52vw, 220px);
    max-width: 100%;
  }

  body.about-combined-page .principals-image{
    grid-column: auto;
    grid-row: auto;
    order: 1;
  }

  body.about-combined-page .principals-panel-content{
    grid-column: auto;
    grid-row: auto;
    order: 2;
    padding-top: 0;
  }

  body.about-combined-page .principals-image img{
    width: min(48vw, 190px);
    max-width: 100%;
  }

  body.about-combined-page .who-we-are-content,
  body.about-combined-page .principals-panel-content{
    padding-top: 0;
    text-align: left;
  }

  body.about-combined-page .who-we-are-content h2,
  body.about-combined-page .principals-panel-content h2{
    margin-bottom: 18px;
  }

  body.about-combined-page .who-we-are-content h4,
  body.about-combined-page .principals-panel-content h4{
    margin-bottom: 18px;
  }

  body.about-combined-page .who-we-are-content p,
  body.about-combined-page .principals-panel-content p{
    max-width: none;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.72;
  }

  body.about-combined-page .principals-section{
    padding-top: 36px;
    padding-bottom: 44px;
  }

  body.about-combined-page .principals-grid-centered{
    margin-top: 28px;
    gap: 18px;
  }

  body.about-combined-page .principal-centered{
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* =====================================================
   SINGAPORE SERVICE DETAIL — final Exchange Rates fix
   ===================================================== */

body.service-detail-page .service-note{
  margin-top: 30px;
}

body.service-detail-page .service-note summary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 18px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(13,15,18,.78);
}

body.service-detail-page .service-note summary::after{
  content: "⌄";
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

body.service-detail-page .service-note[open] summary::after{
  content: "^";
}

body.service-detail-page .service-note-source{
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(13,15,18,.66);
}

/* Keep table behavior normal and prevent the last column escaping */
body.service-detail-page .service-note-table{
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

body.service-detail-page .service-note-table thead{
  display: table-header-group;
}

body.service-detail-page .service-note-table tbody{
  display: table-row-group;
}

body.service-detail-page .service-note-table tr{
  display: table-row;
}

body.service-detail-page .service-note-table th,
body.service-detail-page .service-note-table td{
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  padding: 9px 8px;
}

/* Exchange Rates */
body.service-detail-page .service-note-table:not(.is-four-col) th:nth-child(1),
body.service-detail-page .service-note-table:not(.is-four-col) td:nth-child(1){
  width: 30%;
  text-align: left;
}

body.service-detail-page .service-note-table:not(.is-four-col) th:nth-child(2),
body.service-detail-page .service-note-table:not(.is-four-col) td:nth-child(2){
  width: 14%;
  text-align: right;
}

body.service-detail-page .service-note-table:not(.is-four-col) th:nth-child(3),
body.service-detail-page .service-note-table:not(.is-four-col) td:nth-child(3){
  width: 16%;
  text-align: right;
}

body.service-detail-page .service-note-table:not(.is-four-col) th:nth-child(4),
body.service-detail-page .service-note-table:not(.is-four-col) td:nth-child(4){
  width: 40%;
  text-align: right;
  padding-left: 6px;
}

/* Tax Assumptions and similar */
body.service-detail-page .service-note-table.is-four-col th:nth-child(1),
body.service-detail-page .service-note-table.is-four-col td:nth-child(1){
  width: 48%;
  text-align: left;
}

body.service-detail-page .service-note-table.is-four-col th:nth-child(2),
body.service-detail-page .service-note-table.is-four-col td:nth-child(2){
  width: 18%;
  text-align: right;
}

body.service-detail-page .service-note-table.is-four-col th:nth-child(3),
body.service-detail-page .service-note-table.is-four-col td:nth-child(3){
  width: 34%;
  text-align: right;
  padding-left: 6px;
}

/* Keep Close visible if the element exists in the markup */
body.service-detail-page .service-note[open] .case-close{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
  color: #b58b2a;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.service-detail-page .service-note[open] .case-close::before{
  content: "Close";
}

body.service-detail-page .service-note[open] .case-close span{
  display: inline-block;
  margin-left: 0;
}

/* =====================================================
   SINGAPORE SERVICE DETAIL — table class mapping fix
   The first table is 4-column and HAS .is-four-col
   The later tables are 3-column / 2-column and DO NOT
   ===================================================== */

body.service-detail-page #singapore .service-note{
  margin-top: 30px;
}

body.service-detail-page #singapore .service-note summary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 18px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(13,15,18,.78);
}

body.service-detail-page #singapore .service-note summary::after{
  content: "⌄";
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

body.service-detail-page #singapore .service-note[open] summary::after{
  content: "^";
}

body.service-detail-page #singapore .service-note-source{
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(13,15,18,.66);
}

/* Reset only this note's tables */
body.service-detail-page #singapore .service-note-table{
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

body.service-detail-page #singapore .service-note-table th,
body.service-detail-page #singapore .service-note-table td{
  box-sizing: border-box;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  padding: 9px 10px;
}

/* 1) EXCHANGE RATES = 4 columns = HAS .is-four-col */
body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(1),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(1){
  width: 32%;
  text-align: left;
}

body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(2),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(2){
  width: 14%;
  text-align: right;
}

body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(3),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(3){
  width: 18%;
  text-align: right;
}

body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(4),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(4){
  width: 36%;
  text-align: right;
  padding-left: 12px;
}

/* 2) TAX ASSUMPTIONS = 3 columns = DOES NOT HAVE .is-four-col */
body.service-detail-page #singapore .service-note-section:nth-of-type(2) .service-note-table th:nth-child(1),
body.service-detail-page #singapore .service-note-section:nth-of-type(2) .service-note-table td:nth-child(1){
  width: 52%;
  text-align: left;
}

body.service-detail-page #singapore .service-note-section:nth-of-type(2) .service-note-table th:nth-child(2),
body.service-detail-page #singapore .service-note-section:nth-of-type(2) .service-note-table td:nth-child(2){
  width: 16%;
  text-align: right;
}

body.service-detail-page #singapore .service-note-section:nth-of-type(2) .service-note-table th:nth-child(3),
body.service-detail-page #singapore .service-note-section:nth-of-type(2) .service-note-table td:nth-child(3){
  width: 32%;
  text-align: right;
  padding-left: 12px;
}

/* 3) DIRECT / HOLDCO tables = 2 columns = DOES NOT HAVE .is-four-col */
body.service-detail-page #singapore .service-note-section:nth-of-type(3) .service-note-table th:nth-child(1),
body.service-detail-page #singapore .service-note-section:nth-of-type(3) .service-note-table td:nth-child(1),
body.service-detail-page #singapore .service-note-section:nth-of-type(4) .service-note-table th:nth-child(1),
body.service-detail-page #singapore .service-note-section:nth-of-type(4) .service-note-table td:nth-child(1){
  width: 68%;
  text-align: left;
}

body.service-detail-page #singapore .service-note-section:nth-of-type(3) .service-note-table th:nth-child(2),
body.service-detail-page #singapore .service-note-section:nth-of-type(3) .service-note-table td:nth-child(2),
body.service-detail-page #singapore .service-note-section:nth-of-type(4) .service-note-table th:nth-child(2),
body.service-detail-page #singapore .service-note-section:nth-of-type(4) .service-note-table td:nth-child(2){
  width: 32%;
  text-align: right;
}

/* Keep close visible when present */
body.service-detail-page #singapore .service-note[open] .case-close{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
  color: #b58b2a;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.service-detail-page #singapore .service-note[open] .case-close::before{
  content: "Close";
}

body.service-detail-page #singapore .service-note[open] .case-close span{
  display: inline-block;
  margin-left: 0;
}

/* =====================================================
   SINGAPORE SERVICE DETAIL — final polish
   Align Exchange Rates with Tax Assumptions, keep toggle visible,
   and add more space before the disclaimer
   ===================================================== */

/* Keep the Behind the Numbers toggle visible while the note is open */
body.service-detail-page #singapore .service-note[open] > summary{
  position: sticky;
  top: 72px;
  z-index: 3;
  background: #ffffff;
  padding-top: 6px;
}

/* Exchange Rates:
   make col 3 start where the Tax Assumptions "Rate" column starts */
body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(1),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(1){
  width: 32%;
  text-align: left;
}

body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(2),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(2){
  width: 20%;
  text-align: right;
}

body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(3),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(3){
  width: 16%;
  text-align: right;
}

body.service-detail-page #singapore .service-note-table.is-four-col th:nth-child(4),
body.service-detail-page #singapore .service-note-table.is-four-col td:nth-child(4){
  width: 32%;
  text-align: right;
  padding-left: 12px;
}

/* More breathing room after the last note table before the disclaimer */
body.service-detail-page #singapore .service-note{
  margin-bottom: 34px;
}

body.service-detail-page #singapore .service-note-section:last-child{
  margin-bottom: 18px;
}

body.service-detail-page #singapore .service-footnote{
  margin-top: 34px;
}

/* =====================================================
   MEE TYPOGRAPHY ALIGNMENT — services-mee.html only
   ===================================================== */

/* 1) "How We Work" matches country names */
body.service-detail-page[data-service="mee"] .service-how-we-work h2{
  margin: 0 0 5px;
  font-size: clamp(18px, 4.6vw, 32px);
  line-height: 1.0;
  font-weight: 700;
  color: #111111;
}

/* 2) Section titles match abridged titles */
body.service-detail-page[data-service="mee"] .service-detail-block h3{
  margin: 0 0 10px;
  font-size: clamp(12px, 4.6vw, 28px);
  line-height: 1.06;
  font-weight: 700;
  color: #111111;
}

/* 3) Sub-headings match in-case sub-headings like Regulatory, etc. */
body.service-detail-page[data-service="mee"] .service-detail-block li strong{
  display: block;
  margin: 24px 0 10px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111111;
}

/* 4) Text below sub-headings matches country body content */
body.service-detail-page[data-service="mee"] .service-detail-block ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 700px;
  margin-left: 0;
  margin-right: auto;
}

body.service-detail-page[data-service="mee"] .service-detail-block li{
  position: relative;
  padding-left: 17px;
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.88;
  color: rgba(13,15,18,.84);
  text-align: justify;
  text-justify: inter-word;
}

body.service-detail-page[data-service="mee"] .service-detail-block li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(13,15,18,.84);
  transform: translateY(-50%);
}

/* Keep spacing between service blocks clean after typography changes */
body.service-detail-page[data-service="mee"] .service-detail-block{
  margin: 0 0 38px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(13,15,18,.08);
}

body.service-detail-page[data-service="mee"] .service-detail-block:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

/* =====================================================
   SERVICE DETAIL TYPOGRAPHY — standardised system
   Unifies typography across all service detail pages.
   Uses softer black for headings/titles and leaves body
   copy untouched.
   ===================================================== */

:root{
  --service-heading-soft: rgba(13,15,18,.78);
}

/* Main hero / page title */
body.service-detail-page .service-detail-title{
  color: var(--service-heading-soft);
}

/* Intro labels like "How We Support" */
body.service-detail-page .service-section-intro h2{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--service-heading-soft);
}

/* Section titles like Enterprise Risk Management / Market Entry Advisory */
body.service-detail-page .service-detail-block h3{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--service-heading-soft);
}

/* Sub-headings inside service content */
body.service-detail-page .service-detail-block h4,
body.service-detail-page .service-case-body h4,
body.service-detail-page .service-note-section h5{
  color: var(--service-heading-soft);
}

/* Country and case titles */
body.service-detail-page .service-case-country{
  color: var(--service-heading-soft);
}

body.service-detail-page .service-case-title{
  color: var(--service-heading-soft);
}

/* "How We Work" */
body.service-detail-page .service-how-we-work h2{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--service-heading-soft);
}

/* Related services heading and card titles */
body.service-detail-page .service-related-intro h2,
body.service-detail-page .service-related-card h3{
  color: var(--service-heading-soft);
}

/* Keep all service-detail body copy as-is, but make MEE custom blocks
   behave like the rest of the service pages */
body.service-detail-page[data-service="mee"] .service-detail-block h3{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--service-heading-soft);
}

body.service-detail-page[data-service="mee"] .service-how-we-work h2{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--service-heading-soft);
}

/* If MEE still uses list-based advisory blocks in some versions */
body.service-detail-page[data-service="mee"] .service-detail-block li strong{
  display: block;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--service-heading-soft);
}

/* If MEE uses the cleaned structure with h4 + p blocks */
body.service-detail-page[data-service="mee"] .service-detail-block .service-anchor-target{
  margin: 0 0 24px;
}

body.service-detail-page[data-service="mee"] .service-detail-block .service-anchor-target:last-child{
  margin-bottom: 0;
}

body.service-detail-page[data-service="mee"] .service-detail-block .service-anchor-target h4{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--service-heading-soft);
}

body.service-detail-page[data-service="mee"] .service-detail-block .service-anchor-target p{
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.88;
  color: rgba(13,15,18,.84);
  text-align: justify;
}

body.service-detail-page[data-service="mee"] .service-detail-block .service-anchor-target:last-child p{
  margin-bottom: 0;
}

/* =====================================================
   ABOUT PAGE — PRINCIPALS FEATURED CARD REFRESH (CONSOLIDATED)
   Default: headshot, name, position only
   Active: full-width featured panel with centered identity + wider bio
   Consolidates:
   1) expanded-card layout
   2) left-column identity styling
   3) default closed-card rules
   4) principals mobile overrides
   ===================================================== */

body.about-combined-page .principals-grid-centered{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 28px;
  align-items: start;
  margin-top: 44px;
}

body.about-combined-page .principal-centered{
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 300px;
  padding: 0;
  order: 0;
  border: none;
  border-radius: 28px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

body.about-combined-page .principal-centered:hover,
body.about-combined-page .principal-centered:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
  outline: none;
}

body.about-combined-page .principal-centered.is-active{
  order: -1;
  grid-column: 1 / -1;
  z-index: 3;
  background: rgba(255,255,255,.80);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

body.about-combined-page .principal-card-shell{
  display: grid;
  grid-template-columns: 1fr;
  min-height: 300px;
  height: 100%;
}

body.about-combined-page .principal-centered.is-active .principal-card-shell{
  grid-template-columns: 350px minmax(0, 2fr); /* control first column width */
  align-items: stretch;
}

body.about-combined-page .principal-card-identity{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px 28px;
  min-height: 300px;
}

body.about-combined-page .principal-centered.is-active .principal-card-identity{
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 34px 34px 34px 38px;
  max-width: 340px; /* controls content width in first column */
}

body.about-combined-page .principal-photo-lg{
  width: 128px;
  height: 128px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(44,62,80,.08);
  background: rgba(44,62,80,.04);
  flex-shrink: 0;
}

body.about-combined-page .principal-centered.is-active .principal-photo-lg{
  margin: 0 auto 20px;
}

body.about-combined-page .principal-photo-lg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03) brightness(.99);
}

body.about-combined-page .principal-name-lg{
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #111111;
}

body.about-combined-page .principal-title{
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(13,15,18,.72);
}

body.about-combined-page .principal-quals-lg{
  display: none;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(13,15,18,.76);
}

body.about-combined-page .principal-centered.is-active .principal-quals-lg{
  display: block;
}

body.about-combined-page .principal-centered.is-active .principal-name-lg,
body.about-combined-page .principal-centered.is-active .principal-title,
body.about-combined-page .principal-centered.is-active .principal-quals-lg{
  text-align: center;
}

body.about-combined-page .principal-card-bio{
  display: none;
}

body.about-combined-page .principal-centered.is-active .principal-card-bio{
  display: flex;
  align-items: flex-start;
  min-width: 0;
  padding: 34px 42px 34px 34px;
  border-left: 1px solid rgba(44,62,80,.14);
}

body.about-combined-page .principal-bio-lg{
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(13,15,18,.82);
  text-align: left;
}

body.about-combined-page .principal-bio-lg p{
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.78;
}

body.about-combined-page .principal-bio-lg p:last-child{
  margin-bottom: 0;
}

body.about-combined-page .principal-toggle{
  display: none !important;
}

@media (max-width: 1180px){
  body.about-combined-page .principals-grid-centered{
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 22px;
  }

  body.about-combined-page .principal-centered.is-active .principal-card-shell{
    grid-template-columns: 300px minmax(0, 2fr);
  }

  body.about-combined-page .principal-centered.is-active .principal-card-identity{
    max-width: 280px;
  }
}

@media (max-width: 900px){
  body.about-combined-page .principals-grid-centered{
    grid-template-columns: 1fr 1fr;
  }

  body.about-combined-page .principal-centered.is-active{
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px){
  body.about-combined-page .principals-grid-centered{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.about-combined-page .principal-centered,
  body.about-combined-page .principal-centered.is-active{
    grid-column: auto;
    order: 0;
    min-height: 0;
  }

  body.about-combined-page .principal-card-shell,
  body.about-combined-page .principal-centered.is-active .principal-card-shell{
    grid-template-columns: 1fr;
  }

  body.about-combined-page .principal-card-identity,
  body.about-combined-page .principal-centered.is-active .principal-card-identity{
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
    max-width: none;
    padding: 28px 22px;
  }

  body.about-combined-page .principal-photo-lg,
  body.about-combined-page .principal-centered.is-active .principal-photo-lg{
    margin: 0 0 18px;
  }

  body.about-combined-page .principal-centered.is-active .principal-name-lg,
  body.about-combined-page .principal-centered.is-active .principal-title,
  body.about-combined-page .principal-centered.is-active .principal-quals-lg{
    text-align: left;
  }

  body.about-combined-page .principal-centered.is-active .principal-card-bio{
    padding: 0 22px 28px;
    border-left: none;
    border-top: 1px solid rgba(44,62,80,.16);
  }

  body.about-combined-page .principal-bio-lg,
  body.about-combined-page .principal-bio-lg p{
    font-size: 15px;
    line-height: 1.72;
  }
}

/* =====================================================
   AXSEA SERVICES — FINAL iPHONE RESPONSIVE FIXES
   ===================================================== */

@media (max-width: 768px){
  body.page-services .services-hero-panel{
    min-height: auto;
    margin-top: 0;
    padding: 0;
    display: block;
  }

  body.page-services .services-hero-art{
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  body.page-services .services-hero-art img{
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }

  body.page-services .services-hero-copy{
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    display: block;
    padding: 22px 20px 24px;
    background: #ffffff;
    pointer-events: auto;
    text-align: left;
  }

  body.page-services .hero-half,
  body.page-services .hero-left,
  body.page-services .hero-right{
    display: block;
    width: 100%;
    max-width: none;
    text-align: left;
    padding: 0;
  }

  body.page-services .services-hero-copy h2{
    margin: 0 0 6px;
    font-size: clamp(24px, 8vw, 42px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.page-services .services-hero-copy p{
    margin: 14px 0 0;
    max-width: none;
    font-size: 15px;
    line-height: 1.65;
  }

  body.page-services .ap-image-credit{
    right: 12px;
    bottom: 12px;
    top: auto;
    font-size: 9px;
    letter-spacing: .03em;
    max-width: calc(100% - 24px);
    text-align: right;
    color: rgba(0,0,0,.7)
  }

  body.page-services .services-showcase{
    margin-top: 0;
    padding: 28px 0 48px;
  }

  body.page-services .services-showcase-layout{
    gap: 20px;
  }

  body.page-services .services-content-item h2{
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.05;
    margin-bottom: 16px;
  }

  body.page-services .services-content-item p,
  body.page-services .service-editorial-points li{
    font-size: 16px;
    line-height: 1.6;
  }

  body.page-services .service-points-title{
    font-size: 14px;
    letter-spacing: .1em;
  }

  body.page-services .service-panel,
  body.page-services .service-panel.is-active{
    width: 100%;
    max-width: 100%;
  }

  body.page-services .service-panel .service-panel-card{
    min-height: 300px;
    border-radius: 18px;
  }

  body.page-services .service-panel .service-panel-card img{
    min-height: 300px;
    height: 300px;
  }

  body.page-services .service-panel .service-panel-card-meta{
    width: calc(100% - 22px);
    min-height: auto;
    gap: 12px;
    padding: 16px 16px 14px;
    border-top-right-radius: 18px;
  }

  body.page-services .service-panel .service-panel-card-number{
    font-size: 34px;
    flex: 0 0 auto;
  }

  body.page-services .service-panel .service-panel-card-title{
    max-width: none;
    font-size: 16px;
    line-height: 1.2;
  }

  body.page-services .service-panel .service-panel-overlay-text{
    right: 12px;
    top: 12px;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .08em;
  }
}

@media (max-width: 480px){
  body.page-services .services-hero-copy{
    padding: 18px 16px 20px;
  }

  body.page-services .services-showcase-shell{
    padding-left: 16px;
    padding-right: 16px;
  }

  body.page-services .service-panel-btn{
    width: 100%;
    min-width: 0;
    min-height: 52px;
  }
}


/* =====================================================
   11B. PERSPECTIVES — CURATED CAROUSEL BOARD
   Built on original card typography / media rules
   ===================================================== */

body.page-perspectives .persp-main{
  padding: 18px 0 84px;
}

body.page-perspectives .perspectives-filters{
  margin-bottom: 18px;
}

body.page-perspectives .perspectives-shell.perspectives-cluster{
  display: block;
}

body.page-perspectives .perspectives-cluster-board{
  position: relative;
  display: grid;
  gap: 18px;
  align-items: stretch;
  min-height: 0;
  height: min(calc(100vh - 205px), 760px);
  max-height: 760px;
}

body.page-perspectives .perspectives-cluster-board.is-featured-cluster{
  grid-template-columns: minmax(0, 1.34fr) minmax(0, .92fr) minmax(0, .92fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "hero mid-top right-top"
    "hero mid-bottom right-bottom";
}

body.page-perspectives .perspectives-cluster-board.is-secondary-cluster{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "c1r1 c2r1 c3r1"
    "c1r2 c2r2 c3r2";
}

body.page-perspectives .perspectives-cluster-board .article-card{
  height: 100%;
  min-width: 0;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto auto auto;
  overflow: hidden;
}

body.page-perspectives .perspectives-cluster-board .article-card.featured{
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}

body.page-perspectives .perspectives-cluster-board .article-card.standard{
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}

body.page-perspectives .perspectives-cluster-board .article-card .article-media{
  margin-bottom: 14px;
  min-height: 0;
}

body.page-perspectives .perspectives-cluster-board .article-card.featured .article-media{
  height: calc(100% - 170px);
  aspect-ratio: auto;
}

body.page-perspectives .perspectives-cluster-board .article-card.standard .article-media{
  height: calc(100% - 118px);
  aspect-ratio: auto;
}

body.page-perspectives .perspectives-cluster-board .article-card.featured h2{
  margin: 0 0 10px;
}

body.page-perspectives .perspectives-cluster-board .article-card.standard h3{
  margin: 0 0 8px;
}

body.page-perspectives .perspectives-cluster-board .article-kicker{
  margin: 0 0 8px;
}

body.page-perspectives .perspectives-cluster-board .article-meta{
  margin-top: 0;
}

body.page-perspectives .perspectives-cluster-board .article-card.standard h3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

body.page-perspectives .perspectives-cluster-board .article-card.featured h2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

body.page-perspectives .perspectives-board-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  border: none;
  background: transparent;
  width: 28px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
}

body.page-perspectives .perspectives-cluster-board:hover .perspectives-board-arrow{
  opacity: .88;
}

body.page-perspectives .perspectives-board-arrow:hover{
  opacity: 1 !important;
}

body.page-perspectives .perspectives-board-arrow:disabled{
  opacity: 0 !important;
  cursor: default;
}

body.page-perspectives .perspectives-board-arrow-prev{
  left: 8px;
}

body.page-perspectives .perspectives-board-arrow-next{
  right: 8px;
}

body.page-perspectives .footer{
  margin-top: 18px;
}

@media (max-width: 1280px){
  body.page-perspectives .perspectives-cluster-board{
    height: min(calc(100vh - 198px), 700px);
    max-height: 700px;
  }

  body.page-perspectives .perspectives-cluster-board .article-card.featured .article-media{
    height: calc(100% - 158px);
  }

  body.page-perspectives .perspectives-cluster-board .article-card.standard .article-media{
    height: calc(100% - 112px);
  }
}

@media (max-width: 1080px){
  body.page-perspectives .perspectives-filters{
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
  }

  body.page-perspectives .perspectives-cluster-board{
    height: min(calc(100vh - 252px), 620px);
    max-height: 620px;
    gap: 14px;
  }

  body.page-perspectives .perspectives-cluster-board .article-card.featured .article-media{
    height: calc(100% - 150px);
  }

  body.page-perspectives .perspectives-cluster-board .article-card.standard .article-media{
    height: calc(100% - 106px);
  }

  body.page-perspectives .perspectives-board-arrow{
    width: 22px;
    height: 38px;
  }
}

@media (max-width: 900px){
  body.page-perspectives .perspectives-cluster-board{
    height: min(calc(100vh - 268px), 560px);
    max-height: 560px;
  }

  body.page-perspectives .perspectives-cluster-board .article-card.featured .article-media{
    height: calc(100% - 140px);
  }

  body.page-perspectives .perspectives-cluster-board .article-card.standard .article-media{
    height: calc(100% - 100px);
  }
}

@media (max-width: 760px){
  body.page-perspectives .persp-main{
    padding: 22px 0 56px;
  }

  body.page-perspectives .perspectives-shell{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body.page-perspectives .perspectives-cluster-board{
    height: auto;
    max-height: none;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    gap: 22px;
  }

  body.page-perspectives .perspectives-cluster-board .article-card,
  body.page-perspectives .perspectives-cluster-board .article-card.featured,
  body.page-perspectives .perspectives-cluster-board .article-card.standard{
    height: auto;
    grid-template-rows: auto auto auto auto;
  }

  body.page-perspectives .perspectives-cluster-board .article-card.featured .article-media,
  body.page-perspectives .perspectives-cluster-board .article-card.standard .article-media{
    height: auto;
    aspect-ratio: 1.1 / 0.9;
  }

  body.page-perspectives .perspectives-board-arrow{
    display: none !important;
  }
}


/* =====================================================
   11C. PERSPECTIVES — RATIO RESTORE / BOARD-ONLY LAYOUT
   Restores original card geometry from the baseline stylesheet.
   ===================================================== */

body.page-perspectives .perspectives-cluster-board{
  position: relative;
  display: grid;
  gap: 22px;
  align-items: start;
  height: auto;
  min-height: 0;
  max-height: none;
}

body.page-perspectives .perspectives-cluster-board.is-featured-cluster{
  grid-template-columns: minmax(0, 1.34fr) minmax(0, .92fr) minmax(0, .92fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "hero mid-top right-top"
    "hero mid-bottom right-bottom";
}

body.page-perspectives .perspectives-cluster-board.is-secondary-cluster{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-template-areas:
    "c1r1 c2r1 c3r1"
    "c1r2 c2r2 c3r2";
}

body.page-perspectives .perspectives-cluster-board .article-card{
  display: block;
  height: auto;
  min-width: 0;
  overflow: visible;
}

body.page-perspectives .perspectives-cluster-board .article-card .article-media{
  margin-bottom: 20px;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.page-perspectives .perspectives-cluster-board .article-card.featured .article-media{
  aspect-ratio: 0.78 / 1 !important;
}

body.page-perspectives .perspectives-cluster-board .article-card.standard .article-media{
  aspect-ratio: 1.08 / 0.82 !important;
}

body.page-perspectives .perspectives-cluster-board .article-card.featured h2{
  margin: 0 0 12px;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.08;
}

body.page-perspectives .perspectives-cluster-board .article-card.standard h3{
  margin: 0 0 12px;
  font-size: clamp(16px, 1.2vw, 21px);
  line-height: 1.18;
  min-height: 0;
}

body.page-perspectives .perspectives-cluster-board .article-kicker{
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(44,62,80,.58);
}

body.page-perspectives .perspectives-cluster-board .article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(44,62,80,.72);
}

body.page-perspectives .perspectives-cluster-board .article-card.standard h3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

body.page-perspectives .perspectives-cluster-board .article-card.featured h2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

body.page-perspectives .perspectives-board-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: none;
  background: transparent;
  width: 28px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
}

body.page-perspectives .perspectives-cluster-board:hover .perspectives-board-arrow{
  opacity: .88;
}

body.page-perspectives .perspectives-board-arrow:hover{
  opacity: 1 !important;
}

body.page-perspectives .perspectives-board-arrow:disabled{
  opacity: 0 !important;
  cursor: default;
}

body.page-perspectives .perspectives-board-arrow-prev{
  left: 6px;
}

body.page-perspectives .perspectives-board-arrow-next{
  right: 6px;
}

@media (max-width: 1080px){
  body.page-perspectives .perspectives-cluster-board{
    gap: 18px;
  }

  body.page-perspectives .perspectives-board-arrow{
    width: 22px;
    height: 38px;
  }
}

@media (max-width: 760px){
  body.page-perspectives .perspectives-cluster-board{
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 22px;
  }

  body.page-perspectives .perspectives-board-arrow{
    display: none !important;
  }
}


/* === AXSEA glossary tooltip redesign ===
   Replaces browser title hover boxes with instant click/tap popovers. */
body.article-perspectives-page .ap-tooltip{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  isolation: isolate;
}

body.article-perspectives-page .ap-tooltip-trigger{
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-style: dotted;
}

body.article-perspectives-page .ap-tooltip-trigger::after{
  content: "ⓘ";
  margin-left: 4px;
  font-family: "Inter", var(--font-family-base);
  font-size: 0.72em;
  font-weight: 700;
  color: rgba(44,62,80,.62);
}

body.article-perspectives-page .ap-tooltip-trigger:hover,
body.article-perspectives-page .ap-tooltip-trigger:focus-visible{
  color: #084b6d;
  opacity: 1;
  outline: none;
  text-decoration-style: solid;
}

body.article-perspectives-page .ap-tooltip-box{
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 40px));
  transform: translate(-50%, -4px);
  z-index: 10000;
  display: block;
  padding: 14px 16px;
  border: 1px solid rgba(31,31,29,.14);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  color: #242522;
  font-family: "Inter", var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

body.article-perspectives-page .ap-tooltip-box::before{
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-left: 1px solid rgba(31,31,29,.14);
  border-top: 1px solid rgba(31,31,29,.14);
  background: #ffffff;
}

body.article-perspectives-page .ap-tooltip.is-open .ap-tooltip-box,
body.article-perspectives-page .ap-tooltip:focus-within .ap-tooltip-box,
body.article-perspectives-page .ap-tooltip:hover .ap-tooltip-box{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

body.article-perspectives-page .ap-tooltip.is-open,
body.article-perspectives-page .ap-tooltip:focus-within,
body.article-perspectives-page .ap-tooltip:hover{
  position: relative;
  z-index: 10001;
}

@media (max-width: 640px){
  body.article-perspectives-page .ap-tooltip{
    position: static;
  }
  body.article-perspectives-page .ap-tooltip-box{
    position: fixed;
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 24px;
    width: auto;
    max-width: none;
    transform: translateY(8px);
  }
  body.article-perspectives-page .ap-tooltip-box::before{
    display: none;
  }
  body.article-perspectives-page .ap-tooltip.is-open .ap-tooltip-box,
  body.article-perspectives-page .ap-tooltip:focus-within .ap-tooltip-box,
  body.article-perspectives-page .ap-tooltip:hover .ap-tooltip-box{
    transform: translateY(0);
  }
}