/* 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: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "top-left   top-right"
      "mid-left   mid-right"
      "bot-left   bot-right";
    padding: 120px 56px 64px;
    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.78) 0%,
      rgba(0, 10, 30, 0.22) 55%,
      rgba(0, 0, 0, 0.08) 100%
    );
    z-index: 0;
  }
  .hero::after { display: none; }

  /* ─── four corners ─── */
  .hero-top-left,
  .hero-top-right,
  .hero-bottom-left,
  .hero-bottom-right {
    position: relative;
    z-index: 20;
  }

  
  .hero-top-right   { grid-area: top-right; align-self: start; justify-self: end; max-width: 380px; }
  
  .hero-bottom-right{ grid-area: bot-right; align-self: end; justify-self: end; }

  .hero-bottom-left {  grid-area: mid-left;  align-self: end; display: flex; flex-direction: column; gap: 20px; }



  /* ─── headline (bottom-left) ─── */
  .headline {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 3.2vw, 4rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1px;
    opacity: 0;
    animation: fadeUp 0.9s ease-out 0.5s forwards;
  }
  .headline em {
    font-style: italic;
    color: #fff;
  }

  /* ─── sub (top-right) ─── */
  .sub {
    font-size: clamp(1.25rem, 1.3vw, 1.75rem);
    color: var(--gold);
    /* font-weight: 700; */
    line-height: 1.65;
    margin: 0;
    font-weight: 600;
    opacity: 0;
    animation: fadeUp 0.9s ease-out 0.65s 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.679); 
    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: 28px;
      
      letter-spacing:-.3px;
    }
    .section-title p{
      margin:0;
      color: var(--muted);
      max-width: 70ch;
      font-weight:700;
      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:15px;}
    .card p{margin:0; color: var(--muted); font-size:14px; line-height:1.6; font-weight:500}

    .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: stretch;
    }
    .purpose-container > div:last-child {
      height: 100%;
    }
    .purpose-container > div:last-child img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: var(--radius);
    }
    .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: var(--gold);
      margin-bottom: 14px;
    }
    .purpose-label {
      font-family: var(--font-heading);
      /* font-style: italic; */
      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: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
    .values-heading { 
      margin: 0 0 60px; 
      font-size: 28px; 
      font-weight: 700; 
      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);
      /* font-style: italic; */
      margin: 0 0 24px;
      font-size: 28px;
      letter-spacing: -.3px;
      font-weight: 700;
    }
    .wwa-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch; 
}

.wwa-image {
  height: 100%;
}
    .wwa-image img {
  width: 100%;
  height: 500px;      
  border-radius: 18px;
  display: block;
  object-fit: cover;   
}
    .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 — MISSION/VISION STYLE ============ */
    #what-we-do {
      padding: 80px 20px;
      background: #fff;
    }

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

    .wwd-mv-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: stretch;
    }

    .wwd-mv-row--reverse {
      direction: rtl;
    }
    .wwd-mv-row--reverse > * {
      direction: ltr;
    }

    .wwd-mv-photos img {
      width: 100%;
      height: 500px;
      border-radius: var(--radius);
      display: block;
      /* object-fit: cover; */
    }

    .wwd-mv-photos {
      height: 100%;
    }

    .wwd-mv-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .wwd-mv-section-label {
      font-family: var(--font-heading);
      /* font-style: italic; */
      /* margin-bottom: 20px; */
      font-size: 28px;
      letter-spacing: 1.2;
      font-weight: 700;
    }

    .wwd-mv-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text);
      text-decoration: none;
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 2px;
      width: fit-content;
      transition: opacity .2s;
    }
    .wwd-mv-link:hover { opacity: .65; }

    @media (max-width: 780px) {
      #what-we-do { padding: 60px 16px; }
      .wwd-mv-wrapper { gap: 70px; }
      .wwd-mv-row {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .wwd-mv-row--reverse { direction: ltr; }
      .wwd-mv-row .wwd-mv-content { order: 1; }
      .wwd-mv-row .wwd-mv-photos  { order: 2; }
    }

    #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-style: italic; */
  font-weight: 700;
  color: var(--text);
  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: stretch;
    }
    .mv-row.reverse {
      direction: rtl;
    }
    .mv-row.reverse > * {
      direction: ltr;
    }

    /* ---- Photo collage ---- */
    .mv-photos img {
      border-radius: var(--radius);
      width: 100%;
      height: 500px;
      display: block;
      object-fit: cover;
    }

    .mv-photos {
      height: 100%;
    }

    

    /* 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;
      color: var(--text);
    }
    
    .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 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
          "top-left"
          "top-right"
          "bot-left"
          "bot-right";
        padding: 100px 28px 60px;
        min-height: 100vh;
        gap: 24px;
      }
      .hero-top-right { justify-self: start; max-width: 100%; }
      .hero-bottom-right { justify-self: start; }
      .btns { justify-content: flex-start; }
      .headline { font-size: clamp(2.2rem, 8vw, 3rem); }

      /* ── 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; }

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

.wwd-mv-photos img {
      width: 100%;
      height: 350px;
      border-radius: var(--radius);
      display: block;
      object-fit: cover;
    }

    .mv-photos img {
      border-radius: var(--radius);
      width: 100%;
      height: 350px;
      display: block;
      object-fit: cover;
    }
      
      

      /* ── 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; }

      
      
    }