/* Buttons */
   
    .pill{
      font-family: var(--font-heading);

      display:inline-flex; align-items:center;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--text);
      background: rgba(255,255,255,.06);
      color: #fff;
      font-weight: 600;
      font-size:12px;
    }

    

 /* ─────────────────────────────────────────
     HERO WRAPPER
  ───────────────────────────────────────── */
  .hero{
      position:relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 120px 0 80px;
      overflow:hidden;
      background-image:
        url("../images/heroBg.webp");
      background-size: cover;
      background-position: center;
    }
    /* dark overlay */
    .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 10, 30, 0.72) 0%,      /* left: dark enough for text */
    rgba(0, 10, 30, 0.35) 50%,     /* mid: soft fade */
    rgba(0, 0, 0, 0.0) 100%        /* right: fully transparent — image shines */
  );
  z-index: 0;
}
    /* bottom fade into page */
    .hero::after{ display: none; }

  /* ─────────────────────────────────────────
     CENTER CONTENT
  ───────────────────────────────────────── */
  .center {
    position: relative;
    z-index: 20;
    text-align: center;
    max-width: 560px;
    padding: 0 28px;
  }

  .eyebrow {
    display: block;
    font-size: 15px;
    letter-spacing: 3.5px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0;
    animation: fadeUp 0.9s ease-out 0.4s forwards;
  }

  .headline {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 3vw, 4rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.18;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    opacity: 0;
    animation: fadeUp 0.9s ease-out 0.65s forwards;
  }
  .headline em {
    font-style: italic;
    color: #fff;
  }

  .sub {
    font-size: clamp(1.2rem, 1vw, 3rem);
    color: #fff;
    line-height: 2;
    margin-bottom: 36px;
    opacity: 0;
    animation: fadeUp 0.9s ease-out 0.9s forwards;
  }

  .divider {
    width: 48px;
    height: 1px;
    background: rgba(0,200,160,0.4);
    margin: 0 auto 28px;
    opacity: 0;
    animation: fadeUp 0.9s ease-out 0.78s forwards;
  }

  .btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    /* opacity: 0; */
    animation: fadeUp 0.9s ease-out 1.1s forwards;
  }

  .btn-primary {
    padding: 13px 32px;
    background: rgba(0,200,160,0.1);
    border: 1px solid rgba(0,200,160,0.55);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s;
  }
  .btn-primary:hover {
    background: rgba(0,200,160,0.22);
    border-color: var(--teal);
  }

  .btn-secondary {
    padding: 13px 32px;
    background: rgba(3, 136, 156, 0.384);
    border: 1px solid rgba(0,200,160,0.55);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s;
  }
  .btn-secondary:hover {
    background: rgba(0,200,160,0.22);
    border-color: var(--teal);
  }

  /* .btn-secondary {
    padding: 13px 32px;
    background: rgba(208, 7, 7, 0.1);
    border: 1px solid rgba(160,200,240,0.25);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s;
  }
  .btn-secondary:hover {
    border-color: rgba(160,200,240,0.6);
    color: var(--text);
  } */

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }


    /* ============ SECTIONS ============ */
    section{padding: 34px 0}
    .section-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:16px; margin-bottom: 14px;
    }
    .section-title h2{
      margin:0;
      font-size: 24px;
      letter-spacing:-.3px;
    }
    .section-title p{
      margin:0;
      color: var(--muted);
      max-width: 70ch;
      font-weight:750;
      font-size: 15px;
      line-height: 1.55;
    }

      .hub-section-title{
      display:flex; align-items:flex-end; justify-content:center;
      gap:16px; margin-bottom: 14px;
    }
    .hub-section-title h2{
      margin:0;
      font-size: 24px;
      letter-spacing:-.3px;
    }
    .hub-section-title p{
      margin-top: 6px;
      color: var(--muted);
      max-width: 70ch;
      font-weight:750;
      line-height: 1.55;
    }

    .grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px}
    .grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}

    .card{
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .card .pad{padding: 16px}
    .card h3{margin:0 0 6px; font-size:16px}
    .card p{margin:0; color: var(--muted); font-size:14px; line-height:1.6; font-weight:700}

    .photo{
      height: 210px;
      background-size: cover;
      background-position:center;
      position:relative;
    }
    .photo::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(120deg, rgba(7,10,18,.35), rgba(7,10,18,.10));
    }

    .icon{
      width:40px; height:40px;
      border-radius: 14px;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.14);
      background: radial-gradient(circle at 30% 30%, rgba(53,198,255,.22), rgba(124,58,237,.14));
      margin-bottom: 10px;
    }

    /* ============ OUR PURPOSE SECTION ============ */
    .purpose-section {
      position: relative;
      /* background: #f0f2ec; */
      padding: 80px 0 90px;
      overflow: hidden;
      color: #3a4a2e;
    }
    /* Decorative large arc + circle (top-right corner) */
    .purpose-deco {
      position: absolute;
      top: -60px; right: -80px;
      width: 420px; height: 420px;
      pointer-events: none;
      z-index: 0;
    }
    .purpose-deco svg { width: 100%; height: 100%; }

    .purpose-container {
      position: relative;
      z-index: 1;
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 10px;
      display: grid;
      grid-template-columns: 1fr 480px;
      gap: 40px;
      align-items: center;
    }
    .purpose-left {
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .purpose-ship-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 540px;
  opacity: 0.13;       /* adjust to taste */
  pointer-events: none;
  z-index: 0;
}
.purpose-ship-bg svg {
  width: 100%;
  height: auto;
}
    .purpose-ship {
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.55;
    }
    .purpose-ship svg {
      width: 100%;
      max-width: 480px;
      height: auto;
    }
    /* Top label with line above */
    .purpose-label-row {
      margin-bottom: 28px;
    }
    .purpose-rule {
      display: block;
      width: 220px;
      height: 1px;
      background: #b0b8a0;
      margin-bottom: 14px;
    }
    .purpose-label {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.2px;
    }
    /* Main statement text */
    .purpose-statement {
      font-family: var(--font-body);
      max-width: 600px;
      margin-bottom: 56px;
    }
    .purpose-statement p {
      font-family: var(--font-body);
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.55;
      color: var(--muted);
    }
    .purpose-statement p .highlight {
      color: var(--text);
    }

    /* Buttons row */
    .purpose-buttons {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }
    /* Each pill button */
    .purpose-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 24px;
      border-radius: 999px;
      border: 1.5px solid rgba(90,120,60,.25);
      background: rgba(255,255,255,.70);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      transition: background .22s, border-color .22s, color .22s, box-shadow .22s;
      overflow: visible;
      white-space: nowrap;
      text-decoration: none;
    }
    .purpose-btn .pb-icon {
      font-size: 18px;
      flex-shrink: 0;
    }
    .purpose-btn:hover {
      background: var(--text);
      border-color: var(--text);
      color: #fff;
      box-shadow: 0 8px 28px rgba(88, 110, 131, 0.28);
    }
    /* Tooltip / detail popover on hover */
    .purpose-btn .pb-tip {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      min-width: 240px;
      max-width: 280px;
      padding: 14px 18px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid rgba(90,120,60,.18);
      box-shadow: 0 12px 40px rgba(0,0,0,.14);
      color: #3a4a2e;
      font-size: 13.5px;
      font-weight: 700;
      line-height: 1.6;
      text-align: left;
      white-space: normal;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 100;
    }
    .purpose-btn .pb-tip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: #fff;
    }
    .purpose-btn:hover .pb-tip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media(max-width:900px){
      .purpose-container { grid-template-columns: 1fr; }
      .purpose-ship { display: none; }
      .purpose-buttons { flex-direction: column; align-items: flex-start; }
      .purpose-statement p { font-size: 18px; }
    }

      
   
    /* ============ CORE VALUES (SIE) ============ */
    .values-section { 
      padding: 80px 0 90px; 
      color: var(--text); 
    }
    .values-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center; 
}

.values-side-image {
  position: relative;
  height: 100%;
}

.values-side-image img {
  width: 100%;
  height: 320px; /* 👈 adjust this */
  object-fit: cover;
  border-radius: 12px;
}
    .values-heading { 
      margin: 0 0 60px; 
      font-size: 24px; 
      font-weight: 800; 
      letter-spacing: -.5px; 
      color: var(--text); 
    } 
    .values-list { 
      display: flex; 
      flex-direction: column; 
      
      gap: 0; 
    } 
    .values-item { 
      display: grid; 
      grid-template-columns: 280px 1fr; 
      
      align-items: start; 
      gap: 40px; 
      padding: 48px 0; 
      border-top: 1px solid rgba(0,0,0,.08); 
    } 
    .values-item:last-child { 
      border-bottom: 1px solid rgba(0,0,0,.08); 
    } 
    /* Left side: giant letter + rule + word */ 
    .values-left { 
      display: flex; 
      flex-direction: column; 
    } 
    .values-giant-letter { 
      font-size: 110px; 
      font-weight: 900;
      line-height: .9; 
      color: var(--text); 
      letter-spacing: -4px; 
      margin-bottom: 10px;
      font-family: Georgia, "Times New Roman", serif; 
    } 
    .values-rule { 
      display: block; 
      width: 160px; 
      height: 5px; 
      background: var(--text); 
      border-radius: 3px; 
      margin-bottom: 18px; 
    } 
    .values-word { 
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 2.5px; 
      text-transform: uppercase; 
      color: #1a1a1a; 
    } 
    /* Right side: description */ 
    .values-desc { 
      padding-top: 12px; 
      font-size: 17px; 
      font-weight: 500; 
      line-height: 1.7; 
      color: #3a3a3a; 
      max-width: 640px; 
    } 

    @media(max-width:780px){ 
      .values-item { 
        grid-template-columns: 1fr;
        gap: 16px; 
        padding: 36px 0; 
      } 
      .values-giant-letter { 
        font-size: 80px; 
      } 
      .values-heading { 
        font-size: 28px; 
      } 
    }
     /* ============ WHO WE ARE ============ */

     .wwa-heading {
      font-family: var(--font-heading);
      margin: 0 0 24px;
      font-size: 28px;
      letter-spacing: -.3px;
      font-weight: 700;
    }
    .wwa-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 52px;
  align-items: stretch; /* 🔥 key change */
}

.wwa-image {
  height: 100%;
}
    .wwa-image img {
  width: 100%;
  height: 100%;        /* 🔥 fill full column height */
  border-radius: 18px;
  display: block;
  object-fit: cover;   /* keeps image nicely cropped */
}
    .wwa-brand-row {
      font-family: var(--font-heading);
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 20px;
    }
    .wwa-divider {
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,.14);
    }
    .wwa-desc {
      font-family: var(--font-body);
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.75;
    }
    /* Accordion */
    .wwa-accordion {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .wwa-acc-item {
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .wwa-acc-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      background: transparent;
      border: none;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      text-align: left;
      transition: color .18s;
    }
    .wwa-acc-btn:hover { color: var(--accent); }
    .wwa-acc-arrow {
      font-family: var(--font-body);
      font-size: 20px;
      font-weight: 300;
      line-height: 1;
      transition: transform .3s ease, color .18s;
      flex-shrink: 0;
      color: var(--muted);
    }
    .wwa-acc-item.open .wwa-acc-arrow {
      transform: rotate(45deg);
      color: var(--accent);
    }
    .wwa-acc-item.open .wwa-acc-btn {
      color: var(--accent);
    }
    .wwa-acc-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .35s ease;
    }
    .wwa-acc-item.open .wwa-acc-body {
      grid-template-rows: 1fr;
    }
    .wwa-acc-body > p {
      font-family: var(--font-body);
      overflow: hidden;
      margin: 0;
      padding-bottom: 16px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.7;
    }
    @media(max-width:780px){
      .wwa-wrap { grid-template-columns: 1fr; gap: 24px; }
    }


    /* ============ WHAT WE DO — EXPANDING PANELS ============ */
    .wwd-panels{
      display:flex;
      gap: 14px;
      height: 420px;
    }
    .wwd-panel{
      position:relative;
      border-radius: var(--radius2);
      border:1px solid rgba(255,255,255,.12);
      overflow:hidden;
      cursor:pointer;
      flex: 1;             /* collapsed = equal share */
      transition: flex .55s cubic-bezier(.4,0,.2,1);
    }
    .wwd-panel.active{
      flex: 3;             /* expanded = 3× wider */
    }
    .wwd-bg{
      position:absolute; inset:0;
      background-size:cover;
      background-position:center;
      transition: transform .55s ease;
    }
    .wwd-panel:not(.active) .wwd-bg{
      filter: brightness(.45) saturate(.6);
    }
    .wwd-panel.active .wwd-bg{
      filter: brightness(.8) saturate(.9);
    }
    /* dark overlay */
    .wwd-panel::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(to top, rgba(7,10,18,.80) 0%, rgba(7,10,18,.10) 60%);
      pointer-events:none;
    }
    .wwd-content{
      position:absolute;
      bottom:0; left:0; right:0;
      z-index:2;
      padding: 22px;
    }
    .wwd-content h3{
      font-family: var(--font-heading);
      margin:0 0 6px;
      font-size:20px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .wwd-desc, .wwd-content .btn{
      font-family: var(--font-body);

      opacity:0;
      transform: translateY(10px);
      pointer-events:none;
      transition: opacity .3s ease .15s, transform .3s ease .15s;
      margin:0;
      color: #fff;
      font-size:15px;
      line-height:1.6;
      font-weight:700;
    }
    .wwd-panel.active .wwd-desc,
    .wwd-panel.active .wwd-content .btn{
      opacity:1;
      transform: none;
      pointer-events:auto;
    }
    @media(max-width:780px){
      .wwd-panels{ flex-direction:column; height:auto }
      .wwd-panel{ min-height:120px }
      .wwd-panel.active{ min-height:320px }
      .wwd-content h3{ white-space:normal }
    }

    #offerings {
  padding: 80px 0;
}

.offerings-wrap {
  width: 100%;
}

.offering-card {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  min-height: 420px;
}

.offering-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.offering-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10,20,40,0.82) 35%, rgba(10,20,40,0.25) 100%);
}

.offering-card-body {
  position: relative;
  z-index: 1;
  padding: 48px 52px;
  max-width: 520px;
  /* display: flex;
  flex-direction: column;
  justify-content: flex-end; */
  min-height: 420px;
}

.offering-card-body h3 {
  font-size: 28px;
  font-weight: 600;
  color: #4db8f0;
  margin: 0 0 12px;
}

.offering-card-body p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.6;
  margin: 0 0 24px;
}

/* Responsive */
@media (max-width: 768px) {
  #offerings {
    padding: 48px 0;
  }

  .offering-card,
  .offering-card-body {
    min-height: 320px;
  }

  .offering-card-body {
    padding: 28px 24px;
  }

  .offering-card-body h3 {
    font-size: 22px;
  }

  .offering-card-body p {
    font-size: 14px;
  }
}

    @media(max-width:780px){
      .offerings-wrap{ grid-template-columns: 1fr }
      .offering-card{ position: relative; inset: auto }
      .offering-card:not(.active){ display: none }
    }

    /* ============ TRADING EXPERTISE — AUTO CYCLING CARD ============ */
      /* ============ TRADING EXPERTISE — AUTO CYCLING CARD ============ */
    #mission-vision {
      position: relative;
      overflow: visible;
    }
    .ship-sketch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 90vh;
      pointer-events: none;
      z-index: 0;
      opacity: 0.08;
      color: var(--text);
    }
    .ship-sketch svg {
      width: 100%;
      height: 100%;
    }
    
    
    /* ============ ESG HEADER ============ */
    .esg-header {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 22px;
    }
    .esg-title-pill {
      font-family: var(--font-heading);

      flex-shrink: 0;
      background: var(--text);
      border: 1px solid rgba(53,198,255,.30);
      border-radius: 0 18px 18px 0;
      padding: 18px 48px;
      width: 30%;
      position: relative;
      z-index: 1;
    }
    .esg-title-pill h2 {
      font-family: var(--font-heading);

      margin: 0;
      font-size: 22px;
      letter-spacing: -.3px;
      line-height: 1.3;
      color: #fff;
    }
    .esg-divider {
      flex: 1;
      height: 4px;
      background: rgba(50, 49, 49, 0.12);
      margin: 0 -1px; /* overlap pill border */
    }
    .esg-cta-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(53,198,255,.28), rgba(124,58,237,.22));
      border: 1px solid rgba(53,198,255,.35);
      color: var(--text);
      font-family: var(--font-body);
      font-weight: 900;
      font-size: 14px;
      white-space: nowrap;
      transition: filter .18s, transform .18s;
    }
    .esg-cta-btn:hover {
      filter: brightness(1.15);
      transform: translateY(-2px);
    }
    @media(max-width:780px){
      .esg-header { flex-wrap: wrap; gap: 12px; }
      .esg-divider { display: none; }
    }

      #mission-vision {
      padding: 80px 20px;
      background: #fff;
    }

    .mv-wrapper {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 100px;
    }

    /* ---- Row layout ---- */
    .mv-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start;
    }
    .mv-row.reverse {
      direction: rtl;
    }
    .mv-row.reverse > * {
      direction: ltr;
    }

    /* ---- Photo collage ---- */
    .mv-photos img {
      border-radius: var(--radius);
      height: auto;

    }

    

    /* Vision photos layout */
    

    /* Floating accent badge */
    .mv-badge {
      position: absolute;
      bottom: 18px;
      right: 10px;
      background: var(--accent);
      color: #fff;
      border-radius: 14px;
      padding: 14px 20px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
      text-align: center;
      box-shadow: 0 4px 20px rgba(26,95,173,0.35);
      z-index: 10;
    }
    .mv-badge span {
      display: block;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.1;
    }

    /* ---- Content side ---- */
    .mv-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .mv-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-heading);
      font-size: 28px;

      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--text);
    }
    .mv-tag::before {
      content: '';
      display: block;
      width: 28px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
    }

    .mv-heading {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 3vw, 2.8rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.5px;
      color: var(--text);
    }

    .mv-body {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.75;
      color: var(--muted);
      max-width: 52ch;
    }

    /* Checklist items */
    

    /* Vision accent color */
    
    /* ---- Responsive ---- */
   
    

   

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

    /* Tablet — 1020px */
    @media (max-width: 1020px) {
      /* Nav: hide search, compress to logo + hamburger */
      
      /* .search { display: none; } */

      /* Hero: stack card below text */
      .hero-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
      .hero-card  { flex: 0 0 auto; width: 100%; }
      .hero h1    { font-size: 42px; }

      /* ESG: pill takes more width */
      .esg-title-pill { width: 45%; padding: 16px 28px; }
      .te-card { height: 360px; }
    }

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

      /* ── NAV ── */
     
      
      /* ── HERO ── */
      .hero {
        padding-top: 100px;
        padding-bottom: 60px;
        min-height: 100vh;
      }
      .hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 0 4px;
      }
      .hero-left { gap: 20px; }
      .hero h1   { font-size: 32px; letter-spacing: -.4px; margin-top: 0; }
      .hero p    { font-size: 15px; }
      .hero-cta  { flex-direction: column; align-items: flex-start; gap: 10px; }
      .hero-card {
        flex: 0 0 auto;
        width: 100%;
        border-radius: var(--radius);
      }
      .hero-card .row { gap: 20px; }
      .hero-waves     { height: 80px; }
      .hero-wave      { height: 80px; }

      /* ── ESG SECTION ── */
      .esg-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
      }
      .esg-title-pill {
        width: 100%;
        border-radius: 0 0 18px 18px; /* rounded bottom on mobile */
        padding: 16px 20px;
      }
      .esg-title-pill h2 { font-size: 18px; }
      .esg-divider { display: none; }

      .te-card   { height: 300px; }
      .te-inner  { padding: 0 18px; bottom: 44px; }
      .te-title  { font-size: 20px; }
      .te-desc   { font-size: 13px; }
      .te-dots   { left: 18px; }

        .mv-row {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .mv-row.reverse { direction: ltr; }

      .mv-row .mv-content { order: 1; }
.mv-row .mv-photos  { order: 2; }
      
      

      /* ── GENERAL ── */
      .grid3 { grid-template-columns: 1fr; }
      .grid2 { grid-template-columns: 1fr; }
    }

    /* Small mobile — 480px */
    @media (max-width: 480px) {
      .hero h1  { font-size: 28px; }
      .pill     { font-size: 11px; padding: 6px 10px; }
      .btn      { font-size: 13px; padding: 10px 14px; }
      .te-card  { height: 260px; }
      .stat b   { font-size: 18px; }
       #mission-vision { padding: 60px 16px; }
      .mv-wrapper { gap: 70px; }

      
      
    }