/* =========================================================
   Tokens (only what's used)
   ========================================================= */
:root{
  --brand:#0d6efd;
  --radius:16px;
  --section-y:3.5rem;
  --page:#e7eef8;
  --ink-on-page:#0b132b;
  --card-bg:#f5efe6;
  --card-ink:#0f172a;
  --card-line:#0f172a1a;
  --shadow-lg:0 16px 44px rgba(2,6,23,.36),0 4px 12px rgba(2,6,23,.18);
  --shadow-xl:0 28px 72px rgba(2,6,23,.42),0 10px 24px rgba(2,6,23,.22);
  --nav-h:64px; /* navbar height for hero overlay */
}

/* =========================================================
   Base
   ========================================================= */
html,body{height:100%;scroll-behavior:smooth;}
body{
  background:
    radial-gradient(1100px 600px at 0% 20%, rgba(13,110,253,.10), transparent),
    var(--page);
  color:var(--ink-on-page);
  overflow-x:hidden;
}
section{scroll-margin-top:88px;}
.section-title{font-weight:800;letter-spacing:.02em;}
footer{border-top:1px solid rgba(255,255,255,.08);color:#b8c3d8;}

/* =========================================================
   Transparent Navbar (always white text)
   ========================================================= */
.navbar-compact{ --bs-navbar-padding-y:.15rem; }
.navbar-compact .navbar-brand{ padding-top:0; padding-bottom:0; line-height:1; }
.navbar-compact .nav-link{ padding-top:.2rem; padding-bottom:.2rem; }

.nav-transparent{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.nav-transparent .navbar-brand,
.nav-transparent .nav-link{ color:#fff !important; }

/* Keep bar slim */
.navbar-compact .brand-logo{
  height:48px; /* tweak 44–56px */
  width:auto; display:block;
}

/* =========================================================
   Hero (video, overlay, overlay under navbar)
   ========================================================= */
.hero{
  position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;
  margin-top:calc(-1 * var(--nav-h)); /* pull under nav */
  padding-top:var(--nav-h);           /* keep content visible */
}
.hero video,.hero .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.62));
}
.hero-inner{ position:relative; z-index:2; width:min(1150px,94vw); margin-inline:auto; }
.eyebrow{ text-transform:uppercase; letter-spacing:.25em; font-size:.85rem; color:#b8c3d8; }
.headline{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:800; font-size:clamp(2rem,7vw,4.5rem); line-height:1.05; color:#fff;
}
.headline .accent{ font-family:Satisfy,cursive; font-weight:400; color:#fff; position:relative; white-space:nowrap; }
.headline .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:.18em;
  background:linear-gradient(90deg,var(--brand),#5bd3ff); opacity:.9; transform:skewX(-12deg); z-index:-1; border-radius:2px;
}
.sub{ max-width:60ch; color:#e3e8f0; }
.cta-wrap{ display:flex; flex-wrap:wrap; gap:.75rem; }
.btn-cta{ --bs-btn-padding-y:.75rem; --bs-btn-padding-x:1.25rem; border-radius:999px; font-weight:600; }
.btn-outline-light{ --bs-btn-hover-bg:#ffffff18; }
.btn .arrow{ display:inline-block; transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(.25rem); }

/* Scroll cue */
.scroll-cue{ position:absolute; left:12px; bottom:24px; z-index:3; writing-mode:vertical-rl; transform:rotate(180deg); opacity:.8; display:flex; align-items:center; gap:.5rem; font-size:.9rem; }
.mouse{ width:18px; height:28px; border:2px solid #fff; border-radius:10px; position:relative; }
.mouse::after{ content:""; position:absolute; top:6px; left:50%; width:4px; height:6px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,8px)}}

/* =========================================================
   Cards (beige) + News feature card
   ========================================================= */
.card-ghost,
.news-card,
.accordion-item.card-ghost{
  background:var(--card-bg); color:var(--card-ink);
  border:1px solid var(--card-line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.card-ghost .card-header{ background:transparent; border-bottom:1px solid var(--card-line); }
.card-ghost:hover,.news-card:hover{ box-shadow:var(--shadow-xl); transform:translateY(-1px); transition:box-shadow .25s ease, transform .25s ease; }
.ratio.card-ghost,.news-card.feature .carousel{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }

/* Buttons that look "dark" inside light cards */
.card-ghost .btn-outline-light,.news-card .btn-outline-light{
  --bs-btn-color:#0f172a; --bs-btn-border-color:#0f172a;
  --bs-btn-hover-bg:#0f172a; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#0f172a;
}

/* News carousel tweaks */
.news-card .card-body{ min-height:160px; }
.news-card .carousel-control-prev,
.news-card .carousel-control-next{
  width:3rem; height:3rem; top:40%; transform:translateY(-50%); opacity:.9;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.news-card .carousel-control-prev-icon,
.news-card .carousel-control-next-icon{ filter:invert(1); }
.news-card .carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%; background:#cbd5e1; }
.news-card .carousel-indicators .active{ background:var(--brand); }

/* =========================================================
   Past Performance slider
   ========================================================= */
.past-slider{ position:relative; overflow:hidden; --gutter: clamp(12px, calc((100vw - 1140px) / 2), 40px); }
.past-track{
  display:flex; gap:1.5rem; overflow-x:auto; scroll-behavior:smooth;
  padding-top:1rem; padding-bottom:3rem; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
  padding-inline: calc(var(--gutter) + 2rem);
}
.past-track::-webkit-scrollbar{ display:none; }
.past-slide{ flex:0 0 320px; scroll-snap-align:start; min-width:280px; }
.past-slide:first-child,.past-slide:last-child{ margin:0; }
@media (max-width:991.98px){ .past-slide{ flex:0 0 350px; } }
@media (max-width:767.98px){ .past-slide{ flex:0 0 calc(100vw - 8rem); } }

.past-card{
  height:100%; border-radius:var(--radius); border:1px solid var(--card-line);
  background:var(--card-bg); color:var(--card-ink); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.past-card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-xl); }
.past-card .ratio{ border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; }
.past-card .ratio img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.past-card:hover .ratio img{ transform:scale(1.02); }
.past-card .p-3{ flex:1; display:flex; flex-direction:column; gap:.75rem; padding:1rem; }
.past-card h3{ font-weight:700; font-size:1.1rem; margin:0 0 .5rem 0; }
.past-card ul{ margin:0 0 1rem 0; font-size:.875rem; opacity:.9; flex:1; }

/* Slider arrows */
.pp-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid var(--card-line); box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10;
  font-size:1.2rem; color:var(--card-ink); transition:all .2s ease;
}
.pp-nav:hover{ background:var(--brand); color:#fff; transform:translateY(-50%) scale(1.1); }
.pp-nav.prev{ left: var(--gutter); }
.pp-nav.next{ right:var(--gutter); }
@media (max-width:767.98px){
  .pp-nav.prev{ left:10px; } .pp-nav.next{ right:10px; }
}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{ --reveal-translate:24px; --reveal-duration:.6s; --reveal-delay:0s;
  opacity:0; transform:translateY(var(--reveal-translate));
  transition:opacity var(--reveal-duration) ease, transform var(--reveal-duration) cubic-bezier(.22,.61,.36,1);
  will-change:transform,opacity;
}
.reveal.reveal-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   Forms inside beige cards
   ========================================================= */
.card-ghost .form-control{ border-color:#00000022; color:var(--card-ink); }
.card-ghost .form-control::placeholder{ color:#94a3b8; }

/* =========================================================
   Fonts
   ========================================================= */
@font-face{
  font-family:"EB Garamond";
  src:
    url("./fonts/EB_Garamond/EBGaramond-VariableFont_wght.ttf") format("truetype-variations"),
    url("./fonts/EB_Garamond/EBGaramond-Regular.woff2") format("woff2"),
    url("./fonts/EB_Garamond/EBGaramond-Regular.woff") format("woff");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:
    url("./fonts/EB_Garamond/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations"),
    url("./fonts/EB_Garamond/EBGaramond-Italic.woff2") format("woff2"),
    url("./fonts/EB_Garamond/EBGaramond-Italic.woff") format("woff");
  font-weight:400 800; font-style:italic; font-display:swap;
}
:root{ --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       --font-display: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif; }
body{ font-family: var(--font-sans); }
h1,h2,h3,.section-title,.headline,.card-title,.navbar-brand{
  font-family: var(--font-display); letter-spacing:.01em;
}
/* ==== Reveal (safe-by-default) ==== */
/* Visible by default */
.reveal{
  opacity:1 !important;
  transform:none !important;
}

/* If JS is present, we animate in */
html.js .reveal{
  opacity:0 !important;
  transform:translateY(24px) !important;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1) !important;
}
html.js .reveal.reveal-visible{
  opacity:1 !important;
  transform:none !important;
}

/* --- Services section: solid background + card layout --- */
#services-highlights{
  background: var(--page);
  position: relative;
}

/* Card skeleton (independent of other components) */
#services-highlights .news-card{
  display: flex;                 /* make body stick under image */
  flex-direction: column;
  background: var(--card-bg);
  color: var(--card-ink);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;              /* clip the image to rounded corners */
}

/* 16:9 media up top */
#services-highlights .news-card .ratio{
  width: 100%;
}
#services-highlights .news-card .ratio img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
#services-highlights .news-card .p-3{
  flex: 1;
}

/* Button look inside light card */
#services-highlights .news-card .btn-outline-light{
  --bs-btn-color:#0f172a;
  --bs-btn-border-color:#0f172a;
  --bs-btn-hover-bg:#0f172a;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-border-color:#0f172a;
}