:root{
      --yellow:#FFD400;
      --ink:#111113;
      --muted: rgba(17,17,19,.68);

      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;

      --shadow: 0 24px 70px rgba(0,0,0,.14);
      --shadow2: 0 18px 48px rgba(0,0,0,.18);

      --max: 1220px;
      --pad: clamp(18px, 3.2vw, 34px);

      --ease: cubic-bezier(.2,.8,.2,1);
      --ease2: cubic-bezier(.16, 1, .3, 1);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--ink);
      background: #f4f4f6;
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    button{ font:inherit; }

    .grain{
      position: fixed;
      inset:0;
      pointer-events:none;
      opacity:.11;
      mix-blend-mode: multiply;
      background-image:
        radial-gradient(circle at 20% 10%, rgba(0,0,0,.08), transparent 40%),
        radial-gradient(circle at 80% 0%, rgba(0,0,0,.06), transparent 45%),
        radial-gradient(circle at 60% 90%, rgba(0,0,0,.05), transparent 50%),
        repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 2px);
      filter: contrast(120%) brightness(110%);
      z-index: 9999;
    }

    .wrap{ width:min(var(--max), calc(100% - (var(--pad) * 2))); margin:0 auto; }
    .section{ padding: clamp(52px, 7vw, 92px) 0; position:relative; }

    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      font-weight: 650;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size: 12px;
      color: rgba(17,17,19,.72);
    }
    .kicker::before{
      content:"";
      width: 10px; height:10px;
      border-radius: 999px;
      background: var(--yellow);
      box-shadow: 0 0 0 4px rgba(255,212,0,.25);
    }
    .h2{
      margin: 12px 0 0;
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1.04;
      letter-spacing:-.02em;
    }
    .sub{
      margin: 14px 0 0;
      color: var(--muted);
      font-size: clamp(15px, 1.1vw, 18px);
      line-height: 1.6;
      max-width: 68ch;
    }

    /* =========================================================
       Header / Nav
       ========================================================= */
    .topbar{
      position: fixed;
		width: 100%;
      top:0;
      z-index: 1000;
      background: #ffdd04;
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
	  @media (max-width: 920px){ .topbar{display: block;} }
    .nav{
      height: 78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 18px;
    }
    .brand{ display:flex; align-items:center; height:26px; }
    .brand img{ height:24px; width:auto; display:block; object-fit:contain; margin-top: 2px; }

    .navlinks{
      display:flex;
      align-items:center;
      gap: 18px;
    }
    .navlinks a{
      font-size: 13px;
      font-weight: 650;
      color: rgba(0,0,0,.78);
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.42);
      transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
    }
    .navlinks a:hover{
      transform: translateY(-1px);
		background: rgba(0,0,0,1);
      color: rgba(255,255,255,1);
    }

    .nav-right{ display:flex; align-items:center; gap:6px; }
    .iconbtn{
      width: 38px; height: 38px;
      border-radius: 14px;
     /* border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.30);*/
      display:grid; place-items:center;
      transition: transform .2s var(--ease), background .2s var(--ease);
      cursor:pointer;
    }
    .iconbtn:hover{ transform: translateY(-1px) scale(1.02); background: rgba(255,255,255,.46); }
    .iconbtn img{ width: 26px; height: 26px; }

    .cta{
      display:inline-flex; align-items:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(0,0,0,.92);
      color: #fff;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 10px 20px rgba(0,0,0,.18);
      transition: transform .2s var(--ease), box-shadow .2s var(--ease);
      font-weight: 720;
      font-size: 13px;
      white-space:nowrap;
		margin-left: 13px;
    }
    .cta:hover{ transform: translateY(-1px); box-shadow: 0 16px 28px rgba(0,0,0,.22); }
    .cta img{ width:18px; height:18px; filter: invert(1);}

    .burger{
      display:none;
      background:#000;
      border: 1px solid #000;
    }
    .burger:hover{ background:#111; }
    .burger img{ width: 20px; filter: invert(1); }
    .mobile-panel{
      display:none;
      border-top: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.20);
    }
    .mobile-panel .mwrap{
      padding: 12px 0 18px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .mobile-panel a{
      padding: 12px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.38);
      border: 1px solid rgba(0,0,0,.06);
      font-weight: 700;
      font-size: 14px;
    }

    @media (max-width: 920px){
      body{ padding-top: 72px; }
      .topbar{ display:block; }
      .nav{ height: 72px; }
      .navlinks{ display:none; }
      .nav-right{ gap: 4px; }
      .nav-right .iconbtn:not(.burger){ display:none; }
      .burger{ display:grid; }
      .mobile-panel{ display:none; }
      .mobile-panel.open{ display:block; }
    }
		/* =========================================================
   HERO / INTRO — TRANSLUCENT PANEL VERSION
========================================================= */

.hero-intro{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #e9e9ec;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Background image — clearly visible */
.hero-intro-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  filter: saturate(1) contrast(1.08);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Light contrast overlay (not washing out) */
.hero-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(233,233,236,.70) 0%,
      rgba(233,233,236,.45) 48%,
      rgba(233,233,236,.20) 100%
    );
  z-index: 1;
}

/* Aligns with site width */
.hero-intro-inner{
  position: relative;
  z-index: 2;
  align-items: center;
}

/* TRANSLUCENT CONTENT BOX (like “We are”) */
.hero-intro-panel{
  width: 100%;
  padding: clamp(28px, 4vw, 44px);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-radius: 26px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.35);
	margin-top: 60px;
}

/* Big headline */
.hero-intro-title{
  margin: 0;
  font-size: clamp(62px, 6.8vw, 92px);
  line-height: .88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: rgba(0,0,0,.92);
}
.hero-intro-title .line{
  display:block;
}

/* Body text */
.hero-intro-sub{
  margin-top: 18px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  color: rgba(0,0,0,.75);
  max-width: 74ch;
}

/* CTA */
.hero-intro-cta{
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 820;
  font-size: 13px;
  box-shadow: 0 12px 24px rgba(0,0,0,.20);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-intro-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(0,0,0,.24);
}
.hero-intro-cta img{
  width: 18px;
  height: 18px;
  filter: invert(1);
  opacity: .9;
}

/* Mobile */
@media (max-width: 720px){
  .hero-intro{
    min-height: auto;
    padding: 35px 0;
    align-items: flex-start;
  }
  .hero-intro-title{
    font-size: clamp(56px, 13vw, 86px);
  }
  .hero-intro-panel{
    padding: 24px;
    border-radius: 22px;
    margin-top: 0;
  }
  .hero-intro-bg{
    opacity: .52;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-intro-cta{
    transition: none;
  }
}
    

    /* =========================================================
       Case Studies
       ========================================================= */
    .rowhead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 18px;
      margin-bottom: 22px;
    }
    .rowhead a.more{
      display:inline-flex; align-items:center; gap:10px;
      font-weight: 760;
      font-size: 13px;
      color: rgba(17,17,19,.80);
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.65);
      transition: transform .2s var(--ease), background .2s var(--ease);
      white-space:nowrap;
    }
    .rowhead a.more:hover{ transform: translateY(-1px); background: rgba(255,255,255,.84); }
    .rowhead a.more img{ width: 18px; height:18px; opacity:.9; }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }
    .card{
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: var(--radius-lg);
      overflow:hidden;
      box-shadow: 0 14px 30px rgba(0,0,0,.08);
      transition: transform .25s var(--ease), box-shadow .25s var(--ease);
      position:relative;
      transform: translateZ(0);
      will-change: transform;
    }
    .card:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 46px rgba(0,0,0,.14);
    }
    .cs{ grid-column: span 6; min-height: 340px; display:flex; flex-direction:column; }
    @media (max-width: 920px){ .cs{ grid-column: span 12; } }

    .thumb{
      position:relative;
      aspect-ratio: 16 / 9;
      overflow:hidden;
      background:#0b0b0c;
    }
    .thumb img{
      width:100%; height:100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.05) brightness(.98);
      transform: scale(1.06);
      transition: filter .35s var(--ease), transform .45s var(--ease);
    }
    .card:hover .thumb img{
      filter: grayscale(0) contrast(1.06) brightness(1.02);
      transform: scale(1.02);
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.65));
      opacity:.55;
      transition: opacity .35s var(--ease);
      pointer-events:none;
    }
    .card:hover .thumb::after{ opacity:.35; }

    .cs-body{
      padding: 16px 16px 18px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .cs-title{ margin:0; font-weight: 820; letter-spacing:-.02em; font-size: 18px; }
    .cs-meta{ color: rgba(17,17,19,.68); font-size: 13px; line-height: 1.5; margin:0; }
    .cs-cta{
      margin-top:auto;
      display:flex; justify-content:space-between; align-items:center;
      gap:12px;
      padding-top: 6px;
		text-transform: uppercase;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 9px 11px;
      border-radius: 999px;
      background: rgba(255,212,0,.38);
      border: 1px solid rgba(0,0,0,.06);
      font-weight: 740;
      font-size: 12px;
    }
    .arrow{
      width: 42px; height: 42px;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.72);
      display:grid; place-items:center;
      transition: transform .2s var(--ease), background .2s var(--ease);
    }
    .card:hover .arrow{ transform: translateX(2px); background: rgba(255,255,255,.90); }
    .arrow img{ width: 18px; height: 18px; opacity: .9; }

     /* =========================================================
     We Are (gray band) — UPDATED:
     weare.png is now a BACKGROUND for the content area,
     not an <img> under the section.
     ========================================================= */
  .weare-band{
    background: #e9e9ec;
    padding: clamp(56px, 7vw, 96px) 0;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* content container now holds the background image */
  .weare-content{
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 18px 48px rgba(0,0,0,.10);
    background:
      url("../../Images/header.png") center / cover no-repeat;
    position: relative;
    overflow: hidden;

    /* ensures a nice height even if text is short */
    min-height: clamp(320px, 34vw, 520px);

    /* padding for text */
    padding: clamp(22px, 3.5vw, 34px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }

  /* optional soft overlay to keep text readable on busy areas */
  .weare-content::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, rgba(233,233,236,.92) 0%, rgba(233,233,236,.62) 52%, rgba(233,233,236,.20) 100%),
      radial-gradient(600px 360px at 20% 30%, rgba(255,255,255,.55), transparent 60%);
    pointer-events:none;
  }

  /* keep text above overlay */
  .weare-content > *{
    position:relative;
    z-index:1;
  }

  .weare-title{
    margin: 0;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: .96;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    max-width: 18ch;
  }
  .weare-title .line{ display:block; }

  .weare-link{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    margin-top: 10px;
    font-weight: 800;
    font-size: 13px;
    color: rgba(17,17,19,.74);
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.55);
    width: fit-content;
    transition: transform .2s var(--ease), background .2s var(--ease);
  }
  .weare-link:hover{ transform: translateY(-1px); background: rgba(255,255,255,.78); }
  .weare-link img{ width: 18px; height: 18px; opacity:.9; }

  /* mobile readability: stronger overlay + centered */
  @media (max-width: 720px){
    .weare-content{
      min-height: 380px;
      background-position: center;
      padding: 22px;
    }
    .weare-content::before{
      background: rgba(233,233,236,.86);
    }
    .weare-title{ max-width: none; }
  }



  .clients-tiles{
    padding: clamp(52px, 7vw, 92px) 0;
    position: relative;
  }

  /* subtle “premium” background, still neutral */
  .clients-tiles::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(900px 320px at 20% 0%, rgba(255,212,0,.22), transparent 60%),
      radial-gradient(900px 360px at 90% 10%, rgba(0,0,0,.05), transparent 70%);
    opacity: .95;
  }
  .clients-tiles .wrap{ position:relative; z-index:1; }

  .clients-grid{
    margin-top: 22px;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
  }

  /* 6 cols desktop, 4 cols tablet, 2 cols mobile */
    .client-tile{
      grid-column: span 2; /* 12/2 = 6 across */
      height: 88px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.80);
      box-shadow: 0 16px 40px rgba(0,0,0,.08);
      display:grid;
      place-items:center;
      padding: 12px 14px;
      position:relative;
      overflow:hidden;

      /* entry animation base */
      opacity: 1;
      transform: none;
      transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }

  /* glossy top sheen + yellow micro accent */
  .client-tile::before{
    content:"";
    position:absolute;
    inset:-1px;
    background:
      radial-gradient(260px 120px at 20% 0%, rgba(255,255,255,.60), transparent 60%),
      radial-gradient(320px 160px at 110% 10%, rgba(134,134,134,.18), transparent 60%);
    opacity: .95;
    pointer-events:none;
  }

  /* hover “lift” + subtle yellow ring */
  .client-tile:hover{
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 22px 56px rgba(0,0,0,.12);
    border-color: rgba(255,212,0,.55);
    background: rgba(255,255,255,.92);
  }

  .client-tile img{
    max-width: 150px;
    max-height: 64px;
    width:auto;
    height:auto;
    display:block;
    filter: grayscale(1) contrast(1.05);
    opacity: .88;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
    position:relative;
    z-index:1;
  }
  .client-tile:hover img{
    filter: grayscale(0) contrast(1.05);
    opacity: 1;
    transform: translateY(-1px);
  }

  /* entry state */
    .client-tile.is-in{
      opacity: 1;
      transform: translateY(0) scale(1);
    }

  /* Responsive layout */
  @media (max-width: 1100px){
    .client-tile{ grid-column: span 3; } /* 4 across */
  }
  @media (max-width: 720px){
    .client-tile{ grid-column: span 6; height: 82px; } /* 2 across */
    .client-tile img{ max-width: 140px; }
  }

  @media (prefers-reduced-motion: reduce){
    .client-tile{
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

/* =========================
     SERVICES (5-UP PORTRAIT CARDS)
     FULL CSS BLOCK — scoped to .services-portraits / .svc5-*
  ========================= */

  .services-portraits{
    position: relative;
    background:
      radial-gradient(900px 320px at 18% 10%, rgba(255,212,0,.34), transparent 60%),
      radial-gradient(900px 320px at 85% 5%, rgba(0,0,0,.06), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.55));
  }

  .svc5-grid{
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }

  /* Portrait card */
  .svc5-card{
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.82);
    box-shadow: 0 16px 44px rgba(0,0,0,.08);
    padding: 16px 16px 14px;
    min-height: 230px;              /* portrait feel */
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
    will-change: transform;
  }

  /* premium “sheen” */
  .svc5-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(280px 160px at 22% 8%, rgba(255,255,255,.60), transparent 60%),
      radial-gradient(360px 220px at 105% 0%, rgba(255,212,0,.26), transparent 60%),
      radial-gradient(360px 220px at 0% 100%, rgba(0,0,0,.05), transparent 70%);
    opacity: .95;
    pointer-events:none;
  }

  /* yellow micro-edge (animated on hover) */
  .svc5-card::after{
    content:"";
    position:absolute;
    inset: 10px;
    border-radius: calc(var(--radius-xl) - 10px);
    border: 1px solid rgba(255,212,0,.0);
    transition: border-color .25s var(--ease);
    pointer-events:none;
  }

  .svc5-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0,0,0,.14);
    border-color: rgba(255,212,0,.40);
    background: rgba(255,255,255,.92);
  }
  .svc5-card:hover::after{ border-color: rgba(255,212,0,.55); }

  /* Icon block */
  .svc5-icon{
    width: 52px; height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255,212,0,.40);
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 12px 26px rgba(0,0,0,.08);
    position: relative;
    z-index: 1;
  }
  .svc5-icon img{
    width: 22px; height: 22px;
    opacity: .92;
  }

  .svc5-title{
    position: relative;
    z-index: 1;
    margin-top: 2px;
    font-weight: 900;
    letter-spacing: -0.015em;
    font-size: 14px;
    line-height: 1.15;
  }

  .svc5-desc{
    position: relative;
    z-index: 1;
    color: rgba(17,17,19,.68);
    font-size: 13px;
    line-height: 1.5;
  }

  /* Bottom row */
  .svc5-meta{
    margin-top: auto;
    /*display: flex;*/
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
    padding-top: 6px;
	  display: none;
  }

  .svc5-pill{
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,212,0,.30);
    border: 1px solid rgba(0,0,0,.06);
    font-weight: 820;
    font-size: 12px;
    letter-spacing: .01em;
  }

  .svc5-arrow{
    width: 40px; height: 40px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.74);
    display: grid;
    place-items: center;
    transition: transform .2s var(--ease), background .2s var(--ease);
  }
  .svc5-arrow img{ width: 18px; height: 18px; opacity: .9; }
  .svc5-card:hover .svc5-arrow{
    transform: translateX(2px);
    background: rgba(255,255,255,.94);
  }

  /* Make the whole card keyboard-friendly */
  .svc5-card:focus-visible{
    outline: 3px solid rgba(0,0,0,.55);
    outline-offset: 3px;
  }

  /* Responsive: 5 -> 3 -> 2 -> 1 */
  @media (max-width: 1100px){
    .svc5-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc5-card{ min-height: 220px; }
  }
  @media (max-width: 760px){
    .svc5-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 480px){
    .svc5-grid{ grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    .svc5-card{ transition: none; }
    .svc5-card:hover{ transform: none; }
  }

    /* =========================================================
   News (FULL section CSS) — aligns cards + clamps text
   Works with your existing markup:
   .newsband, .news-grid, .news-card, .thumb, .news-body,
   .news-meta, .dot, .news-title, .news-snippet
   ========================================================= */

.newsband{
  border-radius: var(--radius-xl);
  padding: clamp(18px, 3vw, 26px);
  background:
    linear-gradient(135deg, rgba(255,212,0,.95), rgba(255,212,0,.70)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 12px, rgba(255,255,255,0) 12px 24px);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Grid */
.news-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: stretch; /* makes same-height columns possible */
}

/* Card */
.news-card{
  grid-column: span 6;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  will-change: transform;

  /* KEY: enforce consistent internal layout */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.news-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.14);
  background: rgba(255,255,255,.86);
}

/* Thumbnail */
.news-card .thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b0b0c;
}

.news-card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.98);
  transform: scale(1.06);
  transition: filter .35s var(--ease), transform .45s var(--ease);
}

.news-card:hover .thumb img{
  filter: grayscale(0) contrast(1.05) brightness(1.02);
  transform: scale(1.02);
}

.news-card .thumb::after{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));
  opacity: .55;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.news-card:hover .thumb::after{ opacity: .35; }

/* Body: flex column so title/snippet can reserve height */
.news-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto; /* take remaining height */
}

/* Meta line */
.news-meta{
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(17,17,19,.64);
  font-size: 12px;
  font-weight: 720;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-meta .dot{
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(0,0,0,.36);
  flex: 0 0 auto;
}

/* Title: clamp to 2 lines and reserve vertical space */
.news-title{
  margin: 0;
  font-weight: 880;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex: 0 0 auto;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  /* reserve same height on all cards */
  min-height: calc(2 * 1.25em);
}

/* Snippet: clamp to 3 lines and reserve vertical space */
.news-snippet{
  margin: 0;
  color: rgba(17,17,19,.68);
  font-size: 13px;
  line-height: 1.5;
  flex: 0 0 auto;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  /* reserve same height on all cards */
  min-height: calc(3 * 1.5em);
}

/* Optional: give a little breathing room at bottom if you later add a CTA row */
.news-body::after{
  content:"";
  display: block;
  height: 2px;
}

/* Responsive */
@media (max-width: 920px){
  .news-card{ grid-column: span 12; }
  .news-meta{ white-space: normal; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .news-card,
  .news-card .thumb img,
  .news-card .thumb::after{
    transition: none;
  }
  .news-card:hover{ transform: none; }
}

   
 /* =========================================================
     ARTICLES / NEWS PAGE — NEW STYLES ONLY
     Does NOT redefine .newsband/.news-grid/.news-card etc.
  ========================================================= */

  .articles-page{
    /* your global .section already adds padding; this just adds subtle separation */
    position: relative;
  }

  .articles-hero{
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow);
    padding: clamp(18px, 3.2vw, 30px);
    overflow: hidden;
    position: relative;
  }

  .articles-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(900px 340px at 18% 10%, rgba(255,212,0,.28), transparent 60%),
      radial-gradient(900px 340px at 90% 0%, rgba(0,0,0,.06), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10));
    opacity: .95;
  }

  .articles-hero > *{
    position: relative;
    z-index: 1;
  }

  .articles-title{
    margin: 10px 0 0;
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }

  .articles-sub{
    margin: 14px 0 0;
    color: rgba(17,17,19,.68);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.65;
    max-width: 80ch;
  }

  .articles-list{
    margin-top: 18px;
    border-radius: var(--radius-xl);
    padding: clamp(14px, 2.6vw, 22px);
    border: 1px solid rgba(0,0,0,.08);
    background:
      radial-gradient(900px 340px at 20% 0%, rgba(255,212,0,.14), transparent 62%),
      radial-gradient(900px 360px at 95% 10%, rgba(0,0,0,.05), transparent 70%),
      rgba(255,255,255,.35);
    box-shadow: 0 18px 48px rgba(0,0,0,.08);
  }

  /* Make the reused grid breathe a bit more on long pages */
  .articles-list .news-grid{
    margin-top: 0; /* overrides spacing from other contexts without redefining grid itself */
  }

  /* Optional: tighter on mobile */
  @media (max-width: 720px){
    .articles-list{ padding: 14px; }
  }




/* =========================================================
   ABOUT PAGE — NEW STYLES ONLY (no redefinitions)
========================================================= */

.about-page{ position: relative; }

/* HERO */
.about-hero{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3.2vw, 30px);
  position: relative;
  overflow: hidden;
}

.about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 380px at 18% 10%, rgba(255,212,0,.28), transparent 60%),
    radial-gradient(900px 420px at 92% 8%, rgba(0,0,0,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10));
  opacity: .95;
}
.about-hero > *{ position:relative; z-index:1; }

.about-hero-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .about-hero-grid{ grid-template-columns: 1fr; }
}

.about-title{
  margin: 10px 0 0;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: .96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.about-title .line{ display:block; }

.about-lede{
  margin: 14px 0 0;
  color: rgba(17,17,19,.72);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.75;
  max-width: 70ch;
}

/* RIGHT VISUAL */
.about-hero-visual{
  position: relative;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* orbit visual */
.about-orbit{
  height: 160px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 48px rgba(0,0,0,.10);
  position: relative;
  overflow:hidden;
}

.about-orbit::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(520px 260px at 100% 20%, rgba(255,212,0,.24), transparent 60%),
    radial-gradient(520px 260px at 0% 100%, rgba(0,0,0,.06), transparent 70%);
  opacity: .95;
  pointer-events:none;
}

.orb{
  position:absolute;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.86);
  box-shadow: 0 0 0 6px rgba(255,212,0,.22);
}
.orb-core{
  width: 58px; height: 58px;
  background: var(--yellow);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
}
.orb-a{ top: 26px; left: 34px; }
.orb-b{ top: 52px; right: 40px; }
.orb-c{ bottom: 28px; left: 52%; transform: translateX(-50%); }

.orb-line{
  position:absolute;
  height: 1px;
  background: rgba(0,0,0,.16);
  left: 40px; right: 40px;
}
.line-1{ top: 54px; transform: rotate(-6deg); }
.line-2{ top: 86px; transform: rotate(4deg); }
.line-3{ top: 116px; transform: rotate(-2deg); }

/* Pillars cards */
.about-pillars{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.about-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
  padding: 14px 14px 12px;
  position: relative;
  overflow:hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.about-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(360px 180px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(460px 220px at 105% 10%, rgba(255,212,0,.18), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.about-card > *{ position: relative; z-index: 1; }

.about-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(0,0,0,.12);
  border-color: rgba(255,212,0,.45);
}

.about-card-top{
  display:flex;
  align-items:center;
  gap: 10px;
}

.about-icon{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,212,0,.40);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  font-weight: 900;
}

.about-card-title{
  font-weight: 920;
  letter-spacing: -0.015em;
  font-size: 14px;
}

.about-card-text{
  margin-top: 8px;
  color: rgba(17,17,19,.70);
  font-size: 13px;
  line-height: 1.55;
}

/* BODY GRID */
.about-body{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .about-body{ grid-template-columns: 1fr; }
}

.cardlike{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 48px rgba(0,0,0,.08);
  position: relative;
  overflow:hidden;
}

.cardlike::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(255,212,0,.14), transparent 62%),
    radial-gradient(900px 380px at 95% 10%, rgba(0,0,0,.05), transparent 70%);
  opacity: .95;
}
.cardlike > *{ position:relative; z-index:1; }

.about-story{
  padding: clamp(18px, 3.2vw, 30px);
}

.about-h2{ margin-top: 0; }

.about-rich p{
  margin: 12px 0 0;
  color: rgba(17,17,19,.74);
  font-size: 15px;
  line-height: 1.85;
}

.about-closer{
  margin-top: 14px !important;
  font-weight: 900;
  color: rgba(17,17,19,.84) !important;
}

.about-tiles{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px){
  .about-tiles{ grid-template-columns: 1fr; }
}

.about-tile{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.68);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  padding: 14px 14px 12px;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.about-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(255,212,0,.45);
  box-shadow: 0 20px 44px rgba(0,0,0,.12);
}
.about-tile-k{
  font-weight: 920;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,17,19,.70);
}
.about-tile-v{
  margin-top: 6px;
  font-weight: 860;
  font-size: 13px;
  color: rgba(17,17,19,.86);
}

/* SIDE MEDIA */
.about-media{
  padding: clamp(18px, 3.2vw, 26px);
}

.about-media-top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.about-media-kicker{
  font-weight: 920;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17,17,19,.70);
}
.about-media-mini{
  font-weight: 820;
  font-size: 12px;
  color: rgba(17,17,19,.60);
}

/* collage */
.about-collage{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.about-shot{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  overflow:hidden;
  position: relative;
  transform: translateZ(0);
}
.about-shot img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.06);
  transition: filter .35s var(--ease), transform .45s var(--ease);
}
.about-shot:hover img{
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.02);
}

.s1{ grid-column: span 7; aspect-ratio: 16 / 10; }
.s2{ grid-column: span 5; aspect-ratio: 10 / 10; }
.s3{ grid-column: span 12; aspect-ratio: 16 / 8; }

.about-media-note{
  margin-top: 14px;
  color: rgba(17,17,19,.70);
  font-size: 13px;
  line-height: 1.6;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-card, .about-tile, .about-shot img{
    transition: none;
  }
  .about-card:hover, .about-tile:hover{ transform:none; }
}




 /* =========================
     FOOTER BASE (black + yellow)
     Includes ALL required classes (works standalone)
  ========================= */
  .footer-dark{
    --fy: #ffdd04;
    background: #0b0b0c;
    color: rgba(255,255,255,.88);
    padding: 24px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .footer-dark::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(720px 360px at 18% 10%, rgba(255,221,4,.10), transparent 62%),
      radial-gradient(760px 420px at 92% 20%, rgba(255,221,4,.07), transparent 68%),
      linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%);
  }

  .footer-dark .wrap{
    position: relative;
    z-index: 1;
  }

  .footer-title{
    margin: 0;
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: rgba(255,255,255,.94);
    position: relative;
  }
  .footer-title::after{
    content:"";
    display:block;
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: var(--fy);
    margin-top: 10px;
    box-shadow: 0 0 0 4px rgba(255,221,4,.10);
  }

  .footer-grid{
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    align-items: stretch;
  }

  .fcol{
    position: relative;
    padding: 6px 2px;
    display:flex;
    flex-direction:column;
  }

  /* extremely subtle “panel” (optional) */
  .fcol::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    opacity: .45;
    pointer-events:none;
  }
  .fcol > *{ position: relative; z-index: 1; }

  .fcol h4{
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: rgba(255,255,255,.72);
  }

  .fcol p{
    margin: 8px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    line-height: 1.5;
    max-width: 46ch;
  }

  /* alignment row: forces email/map/socials onto same baseline */
  .faction{
    margin-top: auto;
    min-height: 44px;
    display:flex;
    align-items:center;
  }

  /* email / map line */
  .fline{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 14px;
    color: rgba(255,255,255,.92);
    font-weight: 820;
    font-size: 13px;
    text-decoration:none;
    transition: transform .2s ease, background .2s ease, color .2s ease;
  }
  .fline:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.98);
  }

  /* yellow icon holder + black icon */
  .ficon{
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    background: var(--fy);
    border: 1px solid rgba(255,221,4,.65);
    box-shadow: 0 12px 24px rgba(0,0,0,.28);
    flex: 0 0 auto;
  }
  .ficon img{
    width: 15px;
    height: 15px;
    filter: none;
    opacity: 1;
  }

  /* socials */
  .footer-social{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    align-items:center;
  }
  .f-social-btn{
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    background: var(--fy);
    border: 1px solid rgba(255,221,4,.65);
    box-shadow: 0 16px 34px rgba(0,0,0,.30);
    transition: transform .2s ease, filter .2s ease;
    text-decoration:none;
  }
  .f-social-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.02) contrast(1.02);
  }
  .f-social-btn img{
    width: 15px;
    height: 15px;
    filter: none;
    opacity: 1;
  }

  .footer-bottom{
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    color: rgba(255,255,255,.60);
    font-size: 11px;
  }

  .footer-copy{
    display:inline-flex;
    align-items:center;
    gap: 10px;
  }
  .footer-copy::before{
    content:"";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--fy);
    box-shadow: 0 0 0 4px rgba(255,221,4,.10);
  }

  .footer-links{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap:wrap;
  }
  .footer-links a{
    color: rgba(255,255,255,.72);
    font-weight: 780;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 12px;
    text-decoration:none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .footer-links a:hover{
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.92);
    transform: translateY(-1px);
  }
  .footer-links .sep{ opacity: .35; }

  /* RESPONSIVE */
  @media (max-width: 980px){
    .footer-grid{
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .faction{
      margin-top: 12px;  /* on stacked layout, do not force bottom alignment */
      min-height: unset;
    }
    .footer-bottom{
      flex-direction: column;
      align-items: flex-start;
    }
  }





    /* =========================================================
       Reveal Animations
       ========================================================= */
    .reveal{
      opacity: 1;
      transform: none;
      transition: none;
      will-change: auto;
    }
    .reveal.is-in{ opacity: 1; transform: none; }
    .reveal.delay-1{ transition-delay: 0s; }
    .reveal.delay-2{ transition-delay: 0s; }
    .reveal.delay-3{ transition-delay: 0s; }

    @media (prefers-reduced-motion: reduce){
      .reveal{ opacity:1; transform:none; transition:none; }
      .marquee-track{ animation:none; }
      html{ scroll-behavior:auto !important; }
    }