/* ---- Base & Reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { min-height: 100%; }

:root{
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 16px;

  /* Colors */
  --white: #ffffff;
  --offwhite: #f9f8fa;
  --vlgrey: #f9f9f9;
  --nblack: #1c1c1c;
  --tungsten: #4e5965;
  --dblue: #06274f;
  --bronze: #b87333;
  --bronze-orig: #b08d57;
  --copper: #b87333;
  --green: #487760;
  --tin: #d2d2d2;

  /* Layout */
  --alt: var(--offwhite);
  --header-h: 130px;

  /* Motion */
  --t-fast: .25s;
  --t-med: .45s;
  --t-slow: .6s;
  --t-nav: 1.0s; /* your slowed dropdown */
}

/* Typography */
h1, h2, h3 { line-height: 1.5; margin: 0 0 .5rem; }
h3 {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 300;
}

p { margin: 0 0 1rem; }

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--nblack);
  background: var(--white);
}

/* Constrain content; backgrounds can be full width */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/*===================
       Buttons
  ===================*/
.btn {
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--dblue);
  background: var(--bronze);
  color: #081012;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }

.btn-transparent {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 2.5rem;
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 400;
  text-align: center;
  transition: all 0.3s ease;
}

.btn-transparent:hover {
  background: var(--white);
  color: var(--dblue); /* or any contrasting color */
}

.btn-project {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 2.5rem;
  border: 1px solid var(--bronze);
  background: transparent;
  color: var(--bronze);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 400;
  text-align: center;
  transition: all 0.3s ease;
}

.btn-project:hover {
  background: var(--bronze);
  color: var(--white); /* or any contrasting color */
}

/*==============================
            HOME
  ==============================*/
  
/* ---- Sections ---- */
.section-first {
  padding: 50px 0;
  background: transparent;
}
.section-follow {
  padding-top: 50px;
  padding-bottom: 50px;
  background: transparent;
}
.section-follow-home {
  padding-top: 75px;
  padding-bottom: 75px;
  background: transparent;
}

.section-bg {
  background-color: var(--offwhite);
}
.section-tung {
  background-color: var(--tungsten);
}

.section--light-line { background: var(--offwhite);border-top: 1px solid var(--bronze); }
.section--light { background: var(--offwhite); }

/* Hero section with background video */
.hero {
  position: relative;
  height: 500px;
  max-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--white);
}
.hero-bg {
  position: absolute; inset: 0;
  overflow: hidden; z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: bottom; 
  display: block;
  filter: brightness(70%);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.3rem);
  font-weight: 400;
}
.hero h3 {
  font-size: clamp(1.3rem, 4vw, 2.0rem);
  font-weight: 300;
}

.hero-content { position: relative; z-index: 1; text-align: center;width: 90%;margin-left: auto;margin-right: auto; }
.hero .container { display: grid; gap: 1rem; }


/*  HOME - Projects  */
.project-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
/* tiles */
.project-tile{
  position: relative;
  margin: 0;
  overflow: hidden;              /* clip overlay/zoom */
  border: 1px solid var(--dblue);
  border-radius: 10px;
  isolation: isolate;            /* keeps overlay layers tidy */
  --img-brightness: .65;         /* darker = smaller number */
  --img-brightness-hover: .75;    /* hover brightens slightly */
}
.project-tile img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;  /* change to 16/9 or 1/1 */
  object-fit: cover;
  filter: brightness(var(--img-brightness));
  transition: transform .3s ease, filter .3s ease;
}
.project-tile:hover img{
  transform: scale(1.03);
  filter: brightness(var(--img-brightness-hover));
}
/* caption overlay (centered both ways) */
.caption{
  position: absolute;
  inset: 0;                 /* fill the tile */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* vertical + horizontal centering */
  gap: .35rem;
  padding: 1rem;
  text-align: center;
  color: #fff;
  z-index: 1;               /* above image */
}
.project-title{
  margin: 0;
  line-height: 1.2;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  text-wrap: balance;
}
.project-subtitle{
  margin: 0;
  opacity: .9;
  font-weight: 500;
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
}
/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .project-tile img{ transition: none; }
  .project-tile:hover img{ transform: none; }
}
/* responsive */
@media (max-width: 797px){
  .project-grid{
    grid-template-columns: 1fr;
    gap: 16px; /* optional: tighter spacing on mobile */
  }
  .project-content{
    padding-left: 32px;   /* was 16px */
    padding-right: 32px;
  }
  .project-title{
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    line-height: 1.15;
  }
  .project-subtitle{
    font-size: clamp(1.1rem, 5.5vw, 1.6rem);
    line-height: 1.2;
  }
  /* Optional: a touch more padding so big text breathes */
  .caption{
    padding: 1.25rem;
  }
}

/*========================
        INNER-PAGES
  ======================== */

.page-banner {
  position: relative;
  width: 100%;
  height: 150px; /* adjust as needed */
  overflow: hidden;
}

.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop but keep aspect ratio */
  display: block;
  filter: brightness(80%);
}

.page-banner .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* perfectly center */
  max-width: var(--maxw);
  width: 100%;
  padding: 0 var(--gutter);
}

.page-banner h1 {
  margin: 0;
  width: 100%;
  font-size: 2rem;
  font-weight: 400;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0rem; /* spacing between icon and text */
}

.page-banner .banner-icon {
  width: auto;
  height: 32px;
  display: inline-block;
  filter: brightness(0) invert(1); /* forces it pure white */
}

.page-container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding: 0 100px;
}
.page-container h3 {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 300;
}

.page-heading {
  font-weight: 400;
  font-size: 1.8rem;
  padding-bottom: 25px;
  text-align: left;
  color: var(--copper);
}

.page-heading .banner-icon {
  width: auto;
  height: 28px;
  display: inline-block;
}

@media (max-width:899.98px) {
  .page-container {
    padding: 0 25px;
  }
}

/*========================
      ABOUT
  ======================== */

/* =========================
   PROJECTS TIMELINE (TUNGSTEN)
   ========================= */

.timeline {
  /* Fixed geometry */
  --lineTop: 205px;   /* vertical position of the horizontal line */
  --tickH: 28px;      /* tick height crossing the line */
  --gutterX: 24px;    /* left/right inset for the line on desktop */

  position: relative;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
  padding: 0 var(--gutterX);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;

  /* Make sure the container is tall enough to show the line+ticks */
  min-height: calc(var(--lineTop) + 80px);
}

/* The horizontal line (uses site color with a safe fallback) */
.timeline-line {
  position: absolute;
  left: var(--gutterX);
  right: var(--gutterX);
  top: var(--lineTop);
  height: 4px;
  background: var(--bronze, #b08d57);
  transform: translateY(-50%);
  z-index: 1;
  border-radius: 2px;
}

/* Each project column is a positioning context */
.timeline-item {
  position: relative;
  text-align: center;
  z-index: 2; /* above the line */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-content {
  /* room above for the image; below for headings */
  padding-top: 24px;
  padding-bottom: 48px;
}

/* Image */
.timeline-content img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 3px solid var(--bronze, #b08d57);
  margin-bottom: 80px; /* leaves space for the year */
}

/* ===== Alignment-critical: YEAR + TICK ===== */

/* Year: absolute, centered above the line */
.timeline-content .year {
  position: absolute;
  left: 50%;
  top: calc(var(--lineTop) - var(--tickH) / 2 - 35px); /* nudge as needed */
  transform: translateX(-50%);
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bronze, #b08d57);
  z-index: 3;
  white-space: nowrap;
}

/* Tick: absolute, centered on and crossing the line */
.timeline-content .tick {
  position: absolute;
  left: 50%;
  top: var(--lineTop);
  transform: translate(-50%, -50%); /* crosses the line */
  width: 2px;
  height: var(--tickH);
  background: var(--bronze, #b08d57);
  z-index: 3;
  pointer-events: none;
}

/* Text */
.timeline-content h3 {
  margin: 15px 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bronze, #b08d57);
}

.timeline-content p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--darkgrey);
}

/* =========================
   OPTIONAL: Mobile vertical mode
   Delete this block if you want to keep horizontal everywhere.
   ========================= */
@media (max-width: 768px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px 0 52px; /* space for vertical spine */
    min-height: auto;       /* not needed in vertical mode */
  }

  /* Vertical spine */
  .timeline-line {
    left: 34px;
    right: auto;
    width: 4px;
    top: 0px;
    bottom: 20px;
    height: auto;
    transform: none;
  }

  .timeline-item {
    text-align: left;
    align-items: flex-start;
  }

  /* Tick becomes short horizontal marker across the spine */
  .timeline-content .tick {
    left: 0;   /* centers on the 4px spine at 28px */
    top: 50px;   /* approx under the image; tweak to taste */
    transform: translate(-50%, 0);
    width: 28px;
    height: 2px;
  }

  /* Year goes back to flow for readability */
  .timeline-content .year {
    position: static;
    transform: none;
    margin: 0;
  }

  .timeline-content {
    padding-top: 0;
    padding-bottom: 0;
  }

  .timeline-content img {
    margin-bottom: 12px;
    margin-left: 25px;
  }
}

/*======================
      ABOUT - STRATEGY
  ======================*/

.image-hero {
  position: relative;
  background-image: url("../images/cornwall-above.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
  display: flex;
  align-items: center; /* centers the inner container vertically */
}

/* overlay for readability */
.image-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px) brightness(0.8);
  background: rgba(0,0,0,0.2);
  pointer-events: none;
}

/* make sure inner elements sit above overlay */
.image-hero .container,
.image-hero-title,
.image-hero-content {
  position: relative;
  z-index: 1;
}

/* Heading style (inside .container) */
.image-hero-title {
  margin: 20px 0;
  color: var(--white);
  display: flex;                /* full width flex */
  justify-content: left;      /* 👈 center contents horizontally */
  align-items: center;          /* vertical alignment of icon + text */
  gap: 10px;
  text-align: left;
  width: 100%;                  /* ensure it spans container width */
}

/* icon next to the heading */
.banner-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}

/* Content (inside .page-container) */
.image-hero-content h3 {
  color: var(--white);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.5),
    0 0 10px rgba(0,0,0,0.25);
}

/* spacing for the content block */
.image-hero-content {
  background: rgba(0, 0, 0, 0.15);
  padding: 20px;
  margin-bottom: 60px;
  border-radius: 12px;
  display: inline-block;
}

@media (max-width: 768px) {
  .image-hero { min-height: 360px; }
  .image-hero-content { padding-bottom: 40px; }
}

/*========================
      ABOUT - TEAM
  ======================== */

/* Layout */
.team-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card */
.team-card {
  position: relative;
  background: #fff;
  border: 1px solid #d9deea;
  border-radius: 12px;
  overflow: hidden;             /* keeps overlay within rounded corners */
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  isolation: isolate;           /* reliable stacking */
  outline: none;
}
.team-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.team-card:focus-visible { box-shadow: 0 0 0 3px rgba(0,120,255,.35), 0 8px 24px rgba(0,0,0,.12); }

/* Media + caption */
.team-media { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; transition: transform .3s ease; }
.team-card:hover .team-media { transform: scale(1.02); }

.team-caption { padding: 14px 16px 18px; text-align: center; }
.team-caption h3 { margin: 0 0 6px; font: 600 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#14244b; }
.team-caption p  { margin: 0;    font: 500 16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#6d7691; }

/* Popup overlay */
.team-popup {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-rows: auto 1fr; /* close row + scroll body */
  gap: 8px; padding: 14px 16px;
  background: rgba(14,22,52,.94); color:#fff;
  border-radius: inherit; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s step-end;
}
.team-popup h4 {
  margin-top: 0;
  font-weight: 300;
  font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
}
.team-popup h5 {
  margin-top: -25px;
  font-weight: 300;
  font-size: clamp(1.0rem, 3.5vw, 1.3rem) !important;
}

/* Show overlay on hover / focus / JS toggle */
.team-card:hover .team-popup,
.team-card:focus-within .team-popup,
.team-card.is-open .team-popup {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

/* Close button */
.popup-close {
  justify-self: end;
  appearance: none; border: 0; background: transparent;
  font-size: 28px; line-height: 1; color:#cfd6ff; cursor:pointer;
}
.popup-close:hover { color:#fff; }

/* Scrollable body */
.popup-body {
  align-self: center;               /* use 'start' if you prefer top-aligned */
  text-align: left; margin: 0 auto;
  /* scrolling essentials */
  min-height: 0;                    /* crucial inside CSS grid */
  max-height: 100%;
  overflow: auto;
  padding-right: 5px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Optional: scrollbar styling */
.popup-body::-webkit-scrollbar { width: 8px; }
.popup-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 999px; }
.popup-body::-webkit-scrollbar-track { background: transparent; }
.popup-body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }

.popup-separator {
  height: 1px; border: 0; width: 100%;
  margin: 10px auto 12px;
  background: rgba(255,255,255,.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .team-card, .team-media, .team-popup { transition: none; }
}

/*========================
      PROJECTS
  ======================== */
/* Projects */
.projects {
  margin: 100px 25px;
}
.project {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 50/50 */
  align-items: stretch;
}

/* Alternate image/text sides */
.project:nth-child(even) {
  direction: rtl;               /* quick swap without extra classes */
}
.project:nth-child(even) > * {
  direction: ltr;               /* reset for inner content */
}

/* Media */
.project-media {
  /* Make image run to the container edge on its side */
  margin-inline: calc(var(--gutter, clamp(16px, 4vw, 32px)) * -1) 0;
  /* For even rows, flip the negative margin to the other side */
}
.project:nth-child(even) .project-media {
  margin-inline: 0 calc(var(--gutter, clamp(16px, 4vw, 32px)) * -1);
}
.project-media img {
  display: block;
  width: 100%;
  height: clamp(260px, 40vw, 420px); /* consistent row height, responsive */
  object-fit: cover;
}

/* Copy */
.project-copy {
  display: grid;
  align-content: center;
  padding: clamp(16px, 3vw, 32px);
}
.project-copy h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.5vw + 1rem, 2rem);
  font-weight: 400;
  color: var(--bronze);
}
.project-copy h4 {
  margin: -10px 0 10px;
  font-size: clamp(1.0rem, 1.5vw + 1rem, 1.5rem);
  font-style: normal;
  font-weight: 300;
}

.project-copy ul {
  margin: 0;
  padding-left: 1em;
  line-height: 1.5;
}

/* Mobile: stack, image first */
@media (max-width: 899.98px) {
  .project {
    grid-template-columns: 1fr;
  }
  .project-media,
  .project:nth-child(even) .project-media {
    margin-inline: calc(var(--gutter, clamp(16px, 4vw, 32px)) * -1);
  }
  .project-copy {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
}

/*=======================
    INDIVIDUAL PROJECTS
=========================*/
.hero-inner {
  position: relative;
  height: 500px;
  max-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--white);
}
.hero-bg-inner {
  position: absolute; inset: 0;
  overflow: hidden; z-index: 0;
}
.hero-bg-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(70%);
}
.hero-inner h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
}
.hero-inner h3 {
  font-size: clamp(1.3rem, 4vw, 2.0rem);
  font-weight: 300;
}

.hero-content-inner { position: relative; z-index: 1; text-align: center; }
.hero-inner .container { display: grid; gap: 1rem; }

/*--- FEATURES ---*/
.features {
  padding: clamp(2.5rem, 5vw, 3.0rem) 0;
}

.features-title {
  font-size: clamp(1.5rem, 3vw, 2.0rem);
  margin-bottom: 1rem;
  text-align: left;
  font-weight: 400;
  color: var(--dblue);
}
.features .banner-icon,
.at-a-glance .banner-icon {
  width: auto;
  height: 32px;
  display: inline-block;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.0rem);
  margin: 40px 0;
}

.feature {
  text-align: center;
  padding: 0.2rem;
}

.feature-icon {
  width: 100px;
  height: auto;
  margin-bottom: 1rem;
}

.feature h4 {
  margin: 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
}

.features h3 {
  margin: 0.5rem 0;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
}

.feature p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tungsten);
}

/* Stack on mobile */
@media (max-width: 767.98px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/*--- AT A GLANCE ---*/
.at-a-glance {
  padding: clamp(2.5rem, 5vw, 3.0rem) 0;
  background: var(--vlgrey);
  color: var(--nblack);
}

.glance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 0.5rem;
}

.glance-col h3 {
  margin: 0.5rem 0;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
}

.glance-col strong, .project-expansion h3 strong {
  font-weight: 600;
  color: var(--dblue);
}

.project-expansion {
  margin-top: 0;
}

.project-expansion h3 {
  font-size: 1.25rem;
}


/* Mobile: stack into one column */
@media (max-width: 767.98px) {
  .glance-grid {
    grid-template-columns: 1fr;
  }
}

/*--- MAP & SIGNPOST ---*/
.map {
  background: var(--white);
  text-align: center;
  margin: 50px auto;
}
.signpost {
  background: var(--white);
  text-align: center;
  margin: 100px auto;
}


.map-text {
  margin: 0 auto 2rem auto;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left; /* keeps paragraphs easy to read */
}

.map h3 {
  margin: 0.5rem 0;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
}

.logo-text {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 2rem 0;
  padding: 25px;
  border: 3px solid #87be44;
}
.logo-text-cobre {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin: 50px 0;
  padding: 25px 50px;
  border: 3px solid #009fe1;
}

.logo-text-img {
  width: 250px;     /* adjust as needed */
  height: auto;
  flex-shrink: 0;  /* logo won’t squish */
}

.logo-text-copy {
  margin: 0.5rem 0;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}

/* Mobile: stack logo above text */
@media (max-width: 599.98px) {
  .logo-text, .logo-text-cobre {
    flex-direction: column;
    text-align: center;
  }
  .logo-text-img {
    margin-bottom: 0.5rem;
  }
}

/*========================
        INVESTORS
  ======================== */
#investors-page h2 {
  margin-bottom: 0;
}
#investors-page h4 {
  font-size: 1.4rem;
  font-weight: 300;
  margin-bottom: 0;
  line-height: 1.3;
}
#investors-page .text-size h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 24px;
}

.investors-heading {
  font-weight: 400;
  font-size: 1.8rem;
  padding: 10px 0 10px 25px;
  text-align: center;
  background: transparent;
  color: var(--copper);

  display: flex;
  align-items: center; 
  justify-content: left; 
  gap: 10px; 
}

.title-border {
  border-top: 1px solid var(--dblue);
  border-bottom: 1px solid var(--dblue);
}
.title-border .banner-icon {
  height: 28px;
  width: auto;
}

/*   News & Alerts  */
/* initially hide the iframe area */
.hidden {
  display: none;
}

/* Tabs */
.tool-tabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tool-tab {
  appearance: none;
  border: 1px solid var(--bronze);
  background: #f8f8f8;
  padding: 14px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
}
.tool-tab.is-active {
  background: var(--bronze);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.tool-tab:hover {
  background: var(--bronze);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* iframe wrapper */
.iframe-wrap {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
}
iframe { width:100%; border:none; overflow:hidden; }
#panel-alerts .iframe-wrap {
  width: clamp(320px, 60%, 900px);  /* keeps it responsive */
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
  overflow: hidden;
}



/*  Media & Research  */
/* Grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  margin-top: 20px;
}

/* Card (anchor as block) */
.media-card {
  /* was: display: grid; grid-template-rows: auto 1fr; */
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in oklab, var(--bronze) 35%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.media-card:where(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border-color: var(--bronze);
  outline: none;
}

/* Ratio box for the video */
.media-thumb {
  margin: 5px;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #ffffff;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
}

/* Make iframe fill the figure */
.media-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: var(--radius);
}

/* If you keep image cards elsewhere, scope their img rule */
.media-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

/* Body */
.media-body {
  padding: clamp(14px, 2.2vw, 18px);
  /* was: display: grid; gap: 8px; */
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;           /* make body fill remaining height of the card */
}

/* Media row */
.media-meta {
  font-size: 0.9rem;
  color: var(--tungsten);
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.media-label {
  font-weight: 600;
  color: var(--dblue);
}

/* Headline */
.media-title {
  margin: 0;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  line-height: 1.25;
  color: var(--nblack);
}

/* Intro text */
.media-intro {
  margin: 0;
  color: #4b4b4b;
  line-height: 1.5;
}

.media-date {
  margin-top: auto;  /* pushes date to bottom inside .media-body */
  font-size: 0.9rem;
  font-style: italic;
  color: var(--dblue);
}

/* Optional: make the title change color on hover */
.media-card:hover .media-title,
.media-card:focus-visible .media-title {
  color: var(--bronze);
}
@media (min-width: 900px) {
  .media-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Two-column 60/40 for Research + Logos */
.media-research-cols {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  margin-top: clamp(24px, 4vw, 40px);
  align-items: flex-start;
}

.research-col { 
  flex: 0 0 60%;
  min-width: 280px;
}

/*  logo row  */
.logo-row {
  display: flex;
  flex-direction: column;   /* stack brokers vertically */
  gap: 20px;
  margin-top: 40px;
}

.logo-img {
  display: flex;            /* logo left, text right */
  align-items: center;
  gap: 12px;                /* space between logo and text */
  padding: 12px 16px;
  border: 1px solid lightgrey;
  border-radius: var(--radius);
  background: #fff;
}

.logo-sm {
  max-height: 35px;         /* smaller logo size */
  width: auto;
  object-fit: contain;
}

.logo-img h6 {
  margin: 0;
  font-weight: 400;
  font-size: 18px;          /* smaller text for balance */
  line-height: 1.3;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
  .media-research-cols {
    flex-direction: column;
  }
  .research-col, .logos-col {
    flex: 0 0 100%;
  }
}

/*   Financial Reports   */
.report-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.report-card {
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.report-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.report-date {
  font-weight: 600;
  color: var(--dblue);
  font-size: 0.95rem;
}

.report-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--nblack);
}

.btn-report {
  margin-top: auto;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--bronze);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--bronze);
  transition: background 0.2s, color 0.2s;
}

.btn-report:hover {
  background: var(--bronze);
  color: #fff;
}

/* Presentation card variation */
.presentation-card {
  padding: 0;                           /* remove default card padding */
  background-size: cover;
  background-position: center;
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  min-height: 200px;                    /* keeps card height aligned */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.presentation-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.presentation-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  padding: 16px;
}

.presentation-card .report-date,
.presentation-card .report-title {
  color: #fff;
}
.presentation-card .report-title {
  padding-bottom: 10px;
}
.presentation-card .btn-report {
  border-color: var(--white);
  color: var(--white);
}
.presentation-card .btn-report:hover {
  background: var(--bronze);
  color: var(--dblue);
}

/* Force 3 columns on wider screens for lists that should not stretch */
@media (min-width: 900px) {
  .report-list--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Investors Tables ===== */
.page-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.95rem;
}

.page-container table thead {
  background-color: var(--offwhite);
}

.page-container table th,
.page-container table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: right;
}

.page-container table th {
  font-weight: 600;
  color: var(--dblue);
}

.page-container table tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* light stripe */
}

.page-container table tbody tr:hover {
  background-color: #f1f1f1; /* hover effect */
}

/*  GOVERNANCE  */
.text-size h3 {
  font-size: 1.2rem;
}
.text-size .bold {
  margin-top: 25px;
  font-weight: 400;
}

/*  ADVISORS  */
.advisors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 20px;
}

.advisor-card {
  background: #fff;
  padding: 20px;
  border-radius: var(--radius, 8px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.advisor-card h3 {
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--dblue);
}

.advisor-card p {
  margin: 0;
  line-height: 1.5;
}

/*  AIM Rule 26  */
.aim-rule table th,
.aim-rule table td  {
  text-align: left;
}


/*========================
          CONTACT
  ======================== */

  .form-group {
    margin-bottom:15px;
  }
  label {
    display:block; font-weight:300; margin-bottom:5px;
  }
  input[type="text"], input[type="email"], textarea {
    width:100%;
    padding:10px;
    border:1px solid #ccc; border-radius:7px;
  }
  textarea {
    resize:vertical; height:120px;
  }
  .address {
    text-align: center;
    padding:25px 0;
    border-radius:4px;
  }

/*========================
           FOOTER
  ======================== */
.site-footer {
  border-top: 1px solid var(--white);
  background: var(--nblack);
  padding: 25px 0;
  color: var(--offwhite);
}
.footer-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 10px;
}
.footer-info, .footer-links, .footer-social { flex: 1; min-width: 200px; text-align: center;padding: 25px 0; }
.footer-container h3 {
  color: var(--copper);
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 400;
}
.footer-container h5 {
  font-size: clamp(.8rem, 4vw, 1rem);
  font-weight: 300;
  text-align: center;
  margin-bottom: -25px;
}
.footer-container a { color: var(--offwhite); text-decoration: none; }
.footer-container a:hover { opacity: .5; }
.social-icons { padding: 25px 0 25px 0;}
.social-icons a { display: inline-block; margin-right: 15px; }
.footer-bottom { text-align: center; margin-top: 50px; padding: 10px 0; }
.footer-bottom a { color: var(--offwhite); text-decoration: none; }
.footer-bottom a:hover { opacity: .5; }

/* ---- Accessibility ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}