/* =========================================================
   BRITE IDEAS — Premium Spacious styles.css
   - Same class names (drop-in replacement)
   - More spacing, cleaner cards, better type
   - Brand colors aligned to logo (teal/green/yellow)
   - Auto day/night via data-theme + OS fallback
   ========================================================= */

/* ==========================
   Theme Tokens
   ========================== */

   :root{
    color-scheme: dark;
  
    /* Layout */
    --max:1240px;                 /* a bit wider = more premium */
    --radius:22px;                /* softer modern rounding */
  
    /* Spacing scale */
    --s1: 8px;
    --s2: 12px;
    --s3: 16px;
    --s4: 20px;
    --s5: 28px;
    --s6: 40px;
    --s7: 56px;
    --s8: 76px;
  
    /* Dark surfaces */
    --bg:#070e1a;
    --panel: rgba(255,255,255,.04);
    --panel2: rgba(255,255,255,.06);
    --text:#eef3ff;
    --muted:#a9b7d0;
  
    /* Brand colors (from your icon palette) */
    --accent:#3eacc9;   /* teal-blue */
    --accent2:#c9c83d;  /* yellow */
    --accent3:#2fb57d;  /* green */
  
    /* Borders & shadows */
    --border: rgba(255,255,255,.10);
    --border2: rgba(255,255,255,.14);
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --shadow2: 0 10px 30px rgba(0,0,0,.28);
  
    /* Focus */
    --focus: rgba(62,172,201,.35);
  }
  
  /* Light theme */
  :root[data-theme="light"]{
    color-scheme: light;
  
    --bg:#f7fbff;
    --panel: rgba(255,255,255,.88);
    --panel2: rgba(255,255,255,.94);
    --text:#0a1220;
    --muted:#3f5475;
  
    --border: rgba(10,18,32,.12);
    --border2: rgba(10,18,32,.16);
    --shadow: 0 18px 55px rgba(10,18,32,.12);
    --shadow2: 0 10px 26px rgba(10,18,32,.10);
  
    --focus: rgba(62,172,201,.28);
  }
  
  /* OS fallback if JS is off */
  @media (prefers-color-scheme: light){
    :root:not([data-theme]){
      color-scheme: light;
  
      --bg:#f7fbff;
      --panel: rgba(255,255,255,.88);
      --panel2: rgba(255,255,255,.94);
      --text:#0a1220;
      --muted:#3f5475;
  
      --border: rgba(10,18,32,.12);
      --border2: rgba(10,18,32,.16);
      --shadow: 0 18px 55px rgba(10,18,32,.12);
      --shadow2: 0 10px 26px rgba(10,18,32,.10);
  
      --focus: rgba(62,172,201,.28);
    }
  }
  
  /* ==========================
     Base / Reset
     ========================== */
  
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  
  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(--text);
    line-height:1.55;
    letter-spacing: .1px;
  
    background:
      radial-gradient(1100px 650px at 18% -10%, rgba(62,172,201,.22), transparent 62%),
      radial-gradient(900px 520px at 88% 12%, rgba(47,181,125,.14), transparent 58%),
      radial-gradient(800px 520px at 60% 110%, rgba(201,200,61,.12), transparent 60%),
      var(--bg);
  }
  
  a{color:inherit;text-decoration:none}
  
  .container{
    max-width:var(--max);
    margin:0 auto;
    padding:0 24px;
  }
  
  /* Smooth theme transitions */
  body, .panel, .card, header, footer, .carouselViewport, input, textarea, select{
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  
  /* ==========================
     Accessibility
     ========================== */
  
  .skip{
    position:absolute;
    left:-9999px; top:auto;
    width:1px; height:1px;
    overflow:hidden;
  }
  .skip:focus{
    left:14px; top:14px;
    width:auto; height:auto;
    padding:10px 12px;
    background:#000;
    border-radius:10px;
    z-index:999;
  }
  
  /* ==========================
     Header / Nav
     ========================== */
  
  header{
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter: blur(12px);
  
    background: color-mix(in srgb, var(--panel2) 85%, transparent);
    border-bottom:1px solid var(--border);
  }
  
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 16px 0;
    gap: 18px;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap: 12px;
    font-weight: 900;
    letter-spacing: .2px;
  }
  
  /* Logo */
  .logoImg{
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.16));
  }
  
  footer .logoImg{
    height: 36px;
    filter:none;
  }
  
  .logoLarge{height: 76px;}
  
  .menu{
    display:flex;
    gap: 20px;
    align-items:center;
    flex-wrap:wrap;
  }
  .menu a{
    color:var(--muted);
    font-weight:800;
    padding: 10px 10px;
    border-radius: 12px;
  }
  .menu a:hover{
    color:var(--text);
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
  }
  
  .cta{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
  }
  
  /* ==========================
     Buttons
     ========================== */
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.05);
    color: var(--text);
    cursor:pointer;
    transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
  }
  
  .btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
    border-color: var(--border2);
    box-shadow: var(--shadow2);
  }
  
  .btn.primary{
    background: linear-gradient(135deg, var(--accent), var(--accent3), var(--accent2));
    border-color: transparent;
    box-shadow: 0 16px 40px rgba(62,172,201,.18);
  }
  
  .btn.primary:hover{
    box-shadow: 0 18px 55px rgba(62,172,201,.22);
  }
  
  .btn.ghost{background:transparent}
  .btn.small{padding:10px 14px;font-size:14px}
  
  /* Focus */
  .btn:focus, a:focus, input:focus, textarea:focus, select:focus, .carouselViewport:focus{
    outline: none;
    box-shadow: 0 0 0 3px var(--focus), var(--shadow2);
  }
  
  /* ==========================
     Hero
     ========================== */
  
  .hero{padding: 0px 0 0px;}
  
  .heroGrid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    align-items:stretch;
  }
  
  .panel{
    border:1px solid var(--border);
    background: color-mix(in srgb, var(--panel2) 92%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  
  .heroCopy{padding: 34px;}
  
  h1{
    margin:0 0 12px;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height:1.06;
    letter-spacing: -0.4px;
  }
  
  .sub{
    margin:0;
    color:var(--muted);
    font-size: 17px;
    max-width: 75ch;
  }
  
  .heroActions{
    display:flex;
    gap: 12px;
    flex-wrap:wrap;
    margin-top: 22px;
  }
  
  .pillRow{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
    margin-top: 22px;
  }
  
  .pill{
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    padding: 12px 12px;
    border-radius: 16px;
    color:var(--muted);
    font-weight: 900;
    font-size: 13px;
    text-align:center;
  }
  
  .sideVisual{
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(180deg, rgba(62,172,201,.18), rgba(255,255,255,.03)),
      url("assets/aii/01.png");
    background-size:cover;
    background-position:center;
    min-height: 360px;
  }
  
  .altVisual{
    background-image:
      linear-gradient(180deg, rgba(62,172,201,.18), rgba(255,255,255,.03)),
      url("assets/aii/11.png");
  }
  
  .badge{
    position:absolute;
    left:18px;
    bottom:18px;
    background: color-mix(in srgb, var(--panel2) 78%, transparent);
    border:1px solid var(--border);
    border-radius: 16px;
    padding: 12px 14px;
    font-weight: 900;
  }
  
  /* ==========================
     Sections (More spacious)
     ========================== */
  
  section{padding: 78px 0;}
  
  .sectionTitle{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 18px;
    margin-bottom: 22px;
  }
  
  .sectionTitle h2{
    margin:0;
    font-size: 32px;
    letter-spacing: -.2px;
  }
  
  .sectionTitle p{
    margin:0;
    color:var(--muted);
    max-width: 82ch;
    font-size: 16px;
  }
  
  /* ==========================
     Cards / Grids (Premium)
     ========================== */
  
  .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  
  .card{
    border:1px solid var(--border);
    background: color-mix(in srgb, var(--panel2) 92%, transparent);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow2);
    display:flex;
    flex-direction:column;
    gap: 12px;
    min-height: 240px;
  }
  
  .card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--border2);
  }
  
  .card h3{
    margin:0;
    font-size: 19px;
    letter-spacing: -.1px;
  }
  .card p{
    margin:0;
    color:var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }
  .miniCta{margin-top:auto}
  .miniLink{
    color: color-mix(in srgb, var(--accent2) 85%, white);
    font-weight: 900;
  }
  
  /* ==========================
     Split Callout
     ========================== */
  
  .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items:stretch;
  }
  
  .callout{padding: 28px;}
  .callout h2{margin:0 0 10px}
  .callout p{margin:0;color:var(--muted);max-width:80ch}
  
  /* ==========================
     Industries Chips
     ========================== */
  
  .list3{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 12px;
  }
  
  .chip{
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    border-radius: 999px;
    padding: 12px 14px;
    color:var(--muted);
    font-weight: 900;
    text-align:center;
  }
  
  /* ==========================
     Page Helpers (Services/Sites/Blog Details)
     ========================== */
  
  .pageHero{padding: 56px 0 18px;}
  
  .breadcrumbs{
    margin:0 0 10px;
    color:var(--muted);
    font-weight: 900;
    font-size: 13px;
  }
  .breadcrumbs a{color: var(--accent); font-weight:900;}
  
  .pageTitle{
    margin:0 0 10px;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height:1.08;
  }
  
  .pageIntro{
    margin:0;
    color:var(--muted);
    max-width: 88ch;
    font-size: 16px;
  }
  
  .badgeRow{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    margin-top: 14px;
  }
  
  .badge2{
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    padding: 9px 12px;
    border-radius: 999px;
    color:var(--muted);
    font-weight: 900;
    font-size: 12px;
  }
  
  .twoCol{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items:start;
  }
  
  .content{padding: 22px;}
  .content h2{margin:0 0 10px}
  .content h3{margin:22px 0 10px}
  .content p{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.7}
  .content ul{margin:0 0 14px;color:var(--muted)}
  .content li{margin:8px 0}
  
  .sidebar{padding: 22px;}
  .sidebar h3{margin:0 0 10px}
  .sidebar a{
    display:block;
    padding: 12px 14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    border-radius: 16px;
    margin: 10px 0;
    color:var(--muted);
    font-weight: 900;
  }
  .sidebar a:hover{
    color:var(--text);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border2));
    box-shadow: var(--shadow2);
  }
  
  .hr{
    height:1px;
    background:var(--border);
    margin: 18px 0;
  }
  
  .proTip{
    border:1px solid rgba(62,172,201,.22);
    background: rgba(62,172,201,.07);
    padding: 16px;
    border-radius: 18px;
    color:var(--muted);
    font-weight: 800;
  }
  
  /* Blog list */
  .blogGrid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .blogCard{
    padding: 22px;
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  .blogMeta{
    color:var(--muted);
    font-weight: 900;
    font-size: 12px;
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
  }
  
  /* ==========================
     Forms
     ========================== */
  
  form{margin-top: 14px}
  
  .form{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  input, select, textarea{
    width:100%;
    padding: 14px 14px;
    border-radius: 16px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    color:var(--text);
    outline:none;
    font-weight: 750;
  }
  
  input::placeholder, textarea::placeholder{
    color: color-mix(in srgb, var(--muted) 85%, transparent);
  }
  
  textarea{
    grid-column:1 / -1;
    min-height: 110px;
    resize:vertical;
  }
  
  .full{grid-column:1 / -1}
  
  .formActions{
    display:flex;
    gap: 12px;
    flex-wrap:wrap;
    align-items:center;
    margin-top: 6px;
  }
  
  .note{
    font-size: 12px;
    color: color-mix(in srgb, var(--muted) 90%, transparent);
    margin-top: 10px;
  }
  
  .formStatus{
    margin-top: 10px;
    color:var(--muted);
    font-weight: 900;
  }
  
  /* ==========================
     Footer
     ========================== */
  
  footer{
    border-top:1px solid var(--border);
    background: color-mix(in srgb, var(--panel2) 88%, transparent);
    padding: 44px 0;
    color:var(--muted);
  }
  
  .footGrid{
    display:grid;
    grid-template-columns: 1.2fr .9fr .9fr .9fr;
    gap: 18px;
  }
  
  .footGrid h4{
    margin:0 0 12px;
    color:var(--text);
  }
  
  .footGrid a{
    display:block;
    color:var(--muted);
    font-weight: 850;
    margin: 8px 0;
  }
  
  .small{
    font-size: 12px;
    color: color-mix(in srgb, var(--muted) 90%, transparent);
    margin-top: 14px;
  }
  
  .divider{
    height:1px;
    background:var(--border);
    margin: 22px 0;
  }
  
  .footerBrand{margin-bottom: 10px}
  .footerName{color:var(--text);font-weight: 900}
  
  /* ==========================
     Carousel (Kept compatible)
     ========================== */
  
  .carousel { display:grid; gap: 14px; }
  
  .carouselViewport{
    border:1px solid var(--border);
    background: color-mix(in srgb, var(--panel2) 92%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    outline:none;
    position: relative;
  }
  
  .carouselTrack{
    display:flex;
    width:100%;
    transform: translateX(0%);
    transition: transform 650ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  
  .carouselSlide{
    min-width:100%;
    margin:0;
    position:relative;
    opacity:.55;
    transition: opacity 650ms ease;
  }
  .carouselSlide.is-active{ opacity: 1; }
  
  .carouselSlide img{
    width:100%;
    height: clamp(300px, 40vw, 520px);
    object-fit: cover;
    display:block;
  }
  
  /* CTA overlay */
  .carouselOverlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    pointer-events:none;
    z-index: 1;
    background:
      linear-gradient(
        to top,
        rgba(7,14,26,.92) 0%,
        rgba(7,14,26,.62) 32%,
        rgba(7,14,26,.18) 56%,
        rgba(7,14,26,0) 80%
      );
  }
  
  .carouselOverlayContent{
    padding: 26px;
    max-width: 680px;
    pointer-events: auto;
  }
  
  .carouselOverlayKicker{
    display:inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .3px;
    color: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.25);
    padding: 7px 11px;
    border-radius: 999px;
    margin-bottom: 10px;
    backdrop-filter: blur(10px);
  }
  
  .carouselOverlayTitle{
    margin:0 0 8px;
    font-size: clamp(18px, 2.3vw, 26px);
    line-height: 1.12;
  }
  
  .carouselOverlayDesc{
    margin:0 0 16px;
    color: rgba(235,242,255,.94);
    max-width: 58ch;
    line-height: 1.6;
  }
  
  .carouselOverlayActions{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
  }
  
  /* Progress bar */
  .carouselProgress{
    height: 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.05);
    overflow:hidden;
  }
  
  .carouselProgressFill{
    height:100%;
    width:0%;
    border-radius:999px;
    background: linear-gradient(90deg, var(--accent), var(--accent3), var(--accent2));
    transition-property: width;
    transition-timing-function: linear;
    transition-duration: 0ms; /* JS controls */
    will-change: width;
  }
  
  /* Controls */
  .carouselControls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  .carouselBtn{ min-width: 52px; }
  
  .carouselDots{
    display:flex;
    gap: 10px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
  }
  
  .carouselDot{
    width:10px; height:10px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.10);
    cursor:pointer;
    padding:0;
  }
  .carouselDot[aria-selected="true"]{
    background: rgba(62,172,201,.75);
    border-color: rgba(62,172,201,.6);
  }
  
  /* Meta */
  .carouselMeta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  .carouselStatus{
    color: var(--muted);
    font-weight: 900;
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .carouselTrack{ transition:none; }
    .carouselSlide{ transition:none; }
    .carouselProgressFill{ transition-duration: 0ms; }
  }
  
  /* ==========================
     Responsive
     ========================== */
  
  @media (max-width: 980px){
    .heroGrid,.split,.twoCol{grid-template-columns:1fr}
    .grid,.blogGrid{grid-template-columns:1fr}
    .pillRow{grid-template-columns:1fr 1fr}
    .footGrid{grid-template-columns:1fr 1fr}
    .form{grid-template-columns:1fr}
    .menu{display:none}
    .hero{padding: 60px 0 20px}
    section{padding: 64px 0}
  }
  
  @media (max-width: 768px){
    .logoImg{height: 36px;}
    .carouselOverlayContent{ padding: 16px; }
    .carouselOverlayDesc{ display:none; }
    .container{padding: 0 18px;}
  }
/* ==========================
   ICONS — Services + Sites
   ========================== */

   .i{
    width: 18px;
    height: 18px;
    display:block;
  }
  
  .cardTop{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom: 6px;
  }
  
  .iconBadge{
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display:grid;
    place-items:center;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    background:
      radial-gradient(120% 120% at 18% 12%, rgba(62,172,201,.22), transparent 55%),
      radial-gradient(120% 120% at 88% 20%, rgba(47,181,125,.16), transparent 55%),
      radial-gradient(120% 120% at 50% 110%, rgba(201,200,61,.12), transparent 55%),
      rgba(255,255,255,.03);
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
    color: color-mix(in srgb, var(--accent) 70%, var(--text));
    flex:0 0 auto;
  }
  
  .card:hover .iconBadge{
    transform: translateY(-1px);
    box-shadow: 0 14px 42px rgba(0,0,0,.20);
  }
  
  .card h3{
    margin: 0;
  }
  
  /* Chips with icon */
  .chip{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-start;
    padding: 12px 14px;
  }
  
  .chipIcon{
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--accent3) 65%, var(--text));
    opacity: .95;
  }
    
  /* New CSS */

  /* ===== Tier Cards Layout Fix (Sites Page) ===== */

.tierCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cardBottom {
  margin-top: auto;
  padding-top: 14px;
}

/* For CTA */

/* Sidebar CTA — full rounded + centered */
.sidebar .btn.primary{
  width:100%;
  justify-content:center;
  text-align:center;
  border-radius:999px;   /* full pill */
  padding:16px 22px;     /* slightly taller like screenshot */
  display:flex;
}

/* Button gradient */

/* ===== Fix CTA Button Readability ===== */
.callout .btn.primary{
  color: #0a1220 !important;   /* dark text for contrast */
  font-weight: 900;
  text-align: center;
  justify-content: center;
}

/* keep same on hover */
.callout .btn.primary:hover{
  color: #0a1220 !important;
}





/* Carosual Color */

/* ===== Carousel Title Contrast Fix ===== */

.carouselOverlayTitle{
  color: #ffffff;                 /* force white */
  text-shadow: 0 2px 8px rgba(0,0,0,.45);   /* soft glow for readability */
}

.carouselOverlayDesc{
  color: rgba(255,255,255,.92);  /* slightly soft white */
}

/* Improve overlay gradient for better contrast */
.carouselOverlay{
  background:
    linear-gradient(
      to top,
      rgba(7,14,26,.96) 0%,
      rgba(7,14,26,.72) 35%,
      rgba(7,14,26,.30) 60%,
      rgba(7,14,26,0) 82%
    );
}


/* Current Projects Section */

.projectsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
}

.projectCard{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: color-mix(in srgb, var(--panel2) 92%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}

.projectCard:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.projectImg{
  width:100%;
  height:200px;
  object-fit:cover;
}

.projectBody{
  padding:18px;
}

.projectTitle{
  font-weight:900;
  margin-bottom:6px;
}

.projectMeta{
  font-size:14px;
  color:var(--muted);
}



/* ================================================================== */

.projectsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
}

.projectCard{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: color-mix(in srgb, var(--panel2) 92%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}

.projectCard:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.projectImg{
  width:100%;
  height:200px;
  object-fit:cover;
}

.projectBody{
  padding:18px;
}

.projectTitle{
  font-weight:900;
  margin-bottom:6px;
}

.projectMeta{
  font-size:14px;
  color:var(--muted);
}



/* ======================= */


/* ==========================
   Masonry Gallery
   ========================== */

.masonryGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.masonryItem{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--border);
}

.masonryItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .4s ease;
}

/* Larger tiles */
.masonryItem.large{
  grid-column: span 2;
  grid-row: span 2;
}

/* Hover zoom */
.masonryItem:hover img{
  transform: scale(1.05);
}

/* Overlay */
.masonryOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px;
  background: linear-gradient(
    to top,
    rgba(7,14,26,.88) 0%,
    rgba(7,14,26,.55) 40%,
    rgba(7,14,26,0) 75%
  );
}

.masonryOverlay h3{
  margin:0 0 4px;
  color:#fff;
}

.masonryOverlay p{
  margin:0 0 8px;
  color:rgba(255,255,255,.85);
  font-size:14px;
}

/* Mobile */
@media (max-width: 980px){
  .masonryGrid{
    grid-template-columns: 1fr;
  }

  .masonryItem.large{
    grid-column: span 1;
    grid-row: span 1;
  }
}





/* Make entire card clickable cleanly */
.masonryItem{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

/* Optional hover effect */
.masonryItem:hover .masonryOverlay{
  background: linear-gradient(
    to top,
    rgba(7,14,26,.92) 0%,
    rgba(7,14,26,.65) 45%,
    rgba(7,14,26,0) 80%
  );
}



/* ===== Project Card — Soft Premium Shadow ===== */

.projectCard{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;

  /* same surface softness as .card */
  background: color-mix(in srgb, var(--panel2) 92%, transparent);

  /* base soft shadow (same as .card) */
  box-shadow: var(--shadow2);

  transition: transform .18s ease,
              box-shadow .18s ease,
              border-color .18s ease;
}

/* Hover — lift + deeper soft shadow */
.projectCard:hover{
  transform: translateY(-2px);   /* same lift as .card */
  box-shadow: var(--shadow);     /* deeper but still soft */
  border-color: var(--border2);
}




/* ==========================
   Masonry Cards — Soft Premium Shadow
   ========================== */

.masonryItem{
  display:block;
  position:relative;
  overflow:hidden;

  border-radius: var(--radius);
  border:1px solid var(--border);

  /* SAME soft surface as cards */
  background: color-mix(in srgb, var(--panel2) 92%, transparent);

  /* Base soft shadow */
  box-shadow: var(--shadow2);

  transition: transform .18s ease,
              box-shadow .18s ease,
              border-color .18s ease;
}

/* Hover — same lift as other cards */
.masonryItem:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border2);
}





/* ===== Careers Card Spacing (Visible on all sides) ===== */

#careers-cta{
  margin-top: 48px;
  margin-bottom: 48px;
}

.careersCallout{
  padding: 28px 32px;   /* creates LEFT + RIGHT visible spacing */
}