/* =========================
   BASIC STYLES
========================= */

:root {
    --navy: #081D2F;
    --bg: #DBD7CA;
    --yellow: #F3B429;
    --yellow-hover: #FF9D00;
    --dark: #080808;
    --muted: #C5C2B9;
    --card: #E5E3DC;
    --white: #fff;
    --radius: 19px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: "DM Sans", sans-serif;
    background: var(--bg);
    color: var(--dark);
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

.container { width: 88%; max-width: 1250px; margin: auto; }

/* Navbar */

.header {
    position: sticky;
    top: -14px;
    z-index: 1000;
    padding: 14px 18px 0;
    background: transparent;
}

.navbar {
    width: 100%;
    min-height: 72px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #081D2F;
    border-radius: 19px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    width: 80px;
    display: block;
    flex-shrink: 0;
}

.logo-text {
    color: #FFFFFF;
    font: 500 18px/1 "Times New Roman", Times, serif;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 42px;
}

.nav-links a {
    position: relative;
    color: #C5C2B9;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: color 100ms ease-out;
}

.nav-links a:hover,
.nav-links a.active {
    color: #FFFFFF;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 4px;
    background: #F9B829;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 100ms ease-out;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.menu {
    display: none;
    border: 0;
    background: none;
    color: #FFFFFF;
    font-size: 23px;
    cursor: pointer;
}


/* =========================
   SHARED PIECES
========================= */

/* Rounded navy frames, same 19px corners as the navbar */
.hero, .dark-section, .contact-section {
    margin: 18px 18px 0;
    border-radius: var(--radius);
}

.section { padding: 100px 0; }
.dark-section { background: var(--navy); color: var(--white); }

.section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 12px "Montserrat", sans-serif;
    letter-spacing: 0.16em;
}
.section-label::before { content: ""; width: 28px; height: 3px; background: var(--yellow); }

h2 {
    margin-top: 16px;
    font: 300 clamp(36px, 4.6vw, 60px)/1.1 "Montserrat", sans-serif;
    letter-spacing: -0.03em;
}
h2 span { display: block; font-weight: 700; }
.dark-section h2 span, .hero h1 span { color: var(--yellow); }

h3 { font-family: "Montserrat", sans-serif; }

.section-heading { max-width: 800px; margin-bottom: 55px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading.center .section-label { justify-content: center; }
.section-heading > p:last-child { margin-top: 18px; line-height: 1.7; opacity: 0.7; }

.small-heading { margin-top: 16px; font: 500 20px "Montserrat", sans-serif; opacity: 0.6; }

/* numbers on every card/list item */
.stack-item > span, .foundation-card > span, .doctrine-item > span, .product-card > span,
.work-card > span, .research-item > span, .mentor > span, .leader > span {
    color: var(--yellow-hover);
    font: 700 12px "Montserrat", sans-serif;
    letter-spacing: 0.1em;
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    padding: 15px 28px;
    border-radius: var(--radius);
    font: 700 14px "Montserrat", sans-serif;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.primary-button { background: var(--yellow); color: var(--navy); }
.primary-button:hover { background: var(--yellow-hover); }
.secondary-button { color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.5); }
.secondary-button:hover { background: var(--white); color: var(--navy); }
.dark-button { background: var(--navy); color: var(--white); }
.dark-button:hover { background: var(--dark); }

.text-link { display: inline-block; margin-top: 24px; color: var(--yellow); font-weight: 700; transition: transform 0.3s, color 0.3s; }
.text-link:hover { color: var(--yellow-hover); transform: translateX(6px); }

/* Cards on the beige background */
.foundation-card, .product-card, .support-box {
    padding: 32px;
    border-radius: var(--radius);
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.foundation-card, .product-card { background: var(--card); }
.foundation-card:hover, .product-card:hover { background: var(--navy); color: var(--white); transform: translateY(-8px); }
.foundation-card h3, .product-card h3 { margin: 40px 0 10px; font-size: 21px; line-height: 1.2; }
.foundation-card p, .product-card p { font-size: 14px; line-height: 1.7; opacity: 0.7; }

/* =========================
   HERO
========================= */

.hero {
    position: relative;
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    padding: 80px 0;
    background: var(--navy);
    color: var(--white);
    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 40%, rgba(243, 180, 41, 0.3), transparent 45%),
        radial-gradient(circle at 15% 95%, rgba(243, 180, 41, 0.1), transparent 40%);
    animation: glow 7s ease-in-out infinite alternate;
}

/* Hero background video: sits at the very back, navy background shows through */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(90deg, transparent, #000);
}

.hero-content { position: relative; z-index: 2; width: 88%; max-width: 1250px; margin: auto; }
.hero-content > * { animation: rise 0.9s both; }
.hero-content > :nth-child(2) { animation-delay: 0.1s; }
.hero-content > :nth-child(3) { animation-delay: 0.2s; }
.hero-content > :nth-child(4) { animation-delay: 0.3s; }
.hero-content > :nth-child(5) { animation-delay: 0.4s; }

.eyebrow {
    display: inline-block;
    padding: 9px 16px;
    color: var(--yellow);
    font: 700 14px/1.4 "Montserrat", sans-serif;
    letter-spacing: 0.16em;
    background: rgba(243, 180, 41, 0.12);
    border: 1px solid rgba(243, 180, 41, 0.45);
    border-radius: 12px;
}

.hero h1 {
    max-width: 900px;
    margin-top: 22px;
    font: 300 clamp(44px, 6.5vw, 88px)/1.02 "Montserrat", sans-serif;
    letter-spacing: -0.04em;
}
.hero h1 span, .hero h1 em { display: block; font-weight: 700; font-style: normal; }
.hero h1 em { color: var(--white); }

.hero-description { max-width: 600px; margin-top: 28px; font-size: 17px; line-height: 1.7; opacity: 0.9; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-tagline { margin-top: 30px; font-size: 12px; letter-spacing: 0.12em; opacity: 0.5; }

.scroll-indicator {
    position: absolute;
    right: 32px;
    bottom: 32px;
    font-size: 10px;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
    opacity: 0.6;
    animation: bounce 2s ease-in-out infinite;
}

/* =========================
   CHALLENGE
========================= */

.split-section { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 60px; }
.section-content p { margin-top: 18px; max-width: 700px; line-height: 1.8; opacity: 0.75; }
.section-content .large-text { margin-top: 32px; font: 500 22px/1.5 "Montserrat", sans-serif; opacity: 1; }

/* Challenge: darker text (was light grey at 60-75% opacity) */
#challenge .small-heading,
#challenge .section-content p { opacity: 1; color: #0b1621; }
#challenge .small-heading { color: var(--navy); }

/* Challenge: image placeholder with hover effects */
.challenge-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.challenge-photo:hover { transform: translateY(-8px); box-shadow: 0 22px 40px rgba(8, 29, 47, 0.25); }

.challenge-photo .photo-placeholder,
.challenge-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: grid;
    transition: transform 0.6s ease, background 0.4s ease, border-color 0.4s ease;
}
.challenge-photo:hover img { transform: scale(1.08); }
.challenge-photo:hover .photo-placeholder { background: rgba(243, 180, 41, 0.18); border-color: var(--yellow); }
.challenge-photo .photo-placeholder i { transition: transform 0.5s ease; }
.challenge-photo:hover .photo-placeholder i { transform: scale(1.35) rotate(-8deg); }

/* Caption bar slides up from the bottom on hover */
.challenge-photo::after {
    content: attr(data-caption);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 22px;
    background: var(--navy);
    color: var(--white);
    font: 700 12px "Montserrat", sans-serif;
    letter-spacing: 0.16em;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}
.challenge-photo:hover::after { transform: translateY(0); }

@media (max-width: 1000px) { .challenge-photo { aspect-ratio: 16 / 10; } }
@media (hover: none) { .challenge-photo::after { transform: none; } }

/* =========================
   APPROACH (stack)
========================= */

.stack { max-width: 950px; }

.stack-item {
    display: grid;
    grid-template-columns: 50px 1fr 30px;
    gap: 20px;
    padding: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    transition: padding 0.35s, background 0.35s;
}
.stack-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.stack-item:hover { padding-left: 42px; background: rgba(243, 180, 41, 0.08); }
.stack-item > b { color: var(--yellow); transition: transform 0.3s; }
.stack-item:hover > b { transform: rotate(-45deg); }
.stack-item h3 { font-size: 26px; }
.stack-item p { margin-top: 8px; font-size: 14px; line-height: 1.6; opacity: 0.65; }

/* =========================
   FOUNDATIONS, PRODUCTS
========================= */

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

/* 3 cards on top, 2 below sitting between them (6-column grid, each card spans 2) */
.foundation-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.foundation-card { grid-column: span 2; }
.foundation-card:nth-child(4) { grid-column: 2 / span 2; }
.foundation-card:nth-child(5) { grid-column: 4 / span 2; }

/* What we build: photo background + heading only; hover blurs the photo and reveals the text */
.foundation-card {
    position: relative;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--navy);
    color: var(--white);
}

/* The background photo (an <img> so its path works from the page, not from the css folder) */
.foundation-card > .foundation-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease, transform 0.6s ease;
}

/* ::after = dark tint so the white text is always readable */
.foundation-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 29, 47, 0.85), rgba(8, 29, 47, 0.15) 60%);
    transition: background 0.5s ease;
}

.foundation-card > * { position: relative; z-index: 1; }
.foundation-card > span { position: absolute; top: 32px; left: 32px; }
.foundation-card h3 { margin: 0; }

.foundation-card p {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, margin-top 0.4s ease, opacity 0.4s ease;
}

.foundation-card:hover .foundation-bg { filter: blur(8px); transform: scale(1.12); }
.foundation-card:hover::after { background: rgba(8, 29, 47, 0.78); }
.foundation-card:hover p { max-height: 220px; margin-top: 12px; opacity: 1; }

/* Touch screens have no hover, so show everything */
@media (hover: none) {
    .foundation-card .foundation-bg { filter: blur(8px); transform: scale(1.12); }
    .foundation-card::after { background: rgba(8, 29, 47, 0.78); }
    .foundation-card p { max-height: 220px; margin-top: 12px; opacity: 1; }
}

/* =========================
   DOCTRINE + RESEARCH (left title, right list)
========================= */

.doctrine, .research { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.doctrine-intro, .research-intro { position: sticky; top: 120px; }
.doctrine-intro p { margin-top: 20px; line-height: 1.7; opacity: 0.7; }

.doctrine-item, .research-item, .mentor {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(8, 8, 8, 0.15);
    transition: padding 0.3s;
}
.doctrine-item { border-color: rgba(255, 255, 255, 0.15); }
.doctrine-list, .research-list, .mentor-list { border-top: 1px solid rgba(8, 8, 8, 0.15); }
.doctrine-list { border-color: rgba(255, 255, 255, 0.15); }
.doctrine-item:hover, .research-item:hover, .mentor:hover { padding-left: 14px; }

.doctrine-item h3 { font-size: 22px; }
.research-item h3, .mentor h3 { font-size: 20px; }
.doctrine-item p, .research-item p, .mentor p { margin-top: 8px; font-size: 14px; line-height: 1.7; opacity: 0.7; }

/* =========================
   FEATURED PRODUCT
========================= */

.featured-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 20px;
    padding: 30px;
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius);
}

/* EdgeDesk feature sits right under the hero: same frame size as the hero */
.edgedesk { padding: 60px 0 0; }
.edgedesk .featured-product {
    min-height: calc(100vh - 100px);
    margin: 0 18px;
    padding: 50px max(6%, calc((100% - 1250px) / 2));
}
.edgedesk .product-image { align-self: stretch; }

/* "What it does" chips */
.product-features { margin-top: 28px; }
.product-features-title { color: var(--muted); font: 700 12px "Montserrat", sans-serif; letter-spacing: 0.14em; }
.product-features ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; list-style: none; }
.product-features li {
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    font: 600 14px "Montserrat", sans-serif;
    cursor: default;
    transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.product-features li:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); transform: translateY(-4px); }

.product-image {
    position: relative;
    min-height: 340px;
    border-radius: var(--radius);
    background: radial-gradient(circle, rgba(243, 180, 41, 0.25), transparent 60%), #0d2840;
    overflow: hidden;
}
.product-image::before {
    content: "";
    position: absolute;
    inset: 14%;
    border: 2px dashed rgba(243, 180, 41, 0.5);
    border-radius: 50%;
    animation: spin 20s linear infinite;
}
.product-image::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px;
    background: var(--yellow);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.product-label { color: var(--yellow); font: 700 18px "Montserrat", sans-serif; letter-spacing: 0.14em; }
.product-content h3 { margin: 16px 0; font: 300 clamp(28px, 3vw, 40px)/1.15 "Montserrat", sans-serif; }
.product-content h3 span { display: block; color: var(--yellow); font-weight: 700; }
.product-content > p:not(.product-label) { line-height: 1.7; opacity: 0.75; }

/* =========================
   WORK (dark cards)
========================= */

.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.work-card {
    min-height: 240px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.work-card.large { grid-column: span 2; min-height: 280px; }
.work-card:hover { background: var(--yellow); color: var(--navy); transform: translateY(-6px); }
.work-card:hover > span { color: var(--navy); }
.work-card h3 { max-width: 560px; margin-top: 60px; font-size: 26px; line-height: 1.15; }
.work-card p { max-width: 500px; margin-top: 12px; font-size: 14px; line-height: 1.6; opacity: 0.7; }

/* =========================
   SECTORS
========================= */

.sectors { padding: 100px 0; }
.sectors h2 { max-width: 850px; }
.sector-tags { display: flex; flex-wrap: wrap; gap: 12px; max-width: 950px; margin-top: 45px; }
.sector-tags span {
    padding: 14px 24px;
    background: var(--card);
    border-radius: var(--radius);
    font: 600 14px "Montserrat", sans-serif;
    cursor: default;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.sector-tags span:hover { background: var(--yellow); color: var(--black); transform: translateY(-4px); }

/* =========================
   BACKED & GUIDED, LEADERSHIP
========================= */

.support-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; }
.support-box { align-self: start; background: var(--navy); color: var(--white); }
.support-box small { color: var(--yellow); font: 700 12px "Montserrat", sans-serif; letter-spacing: 0.12em; }
.support-box p { margin-top: 20px; font-size: 14px; line-height: 1.8; opacity: 0.75; }

.leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.leader {
    min-height: 240px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.leader:hover { background: var(--yellow); color: var(--navy); transform: translateY(-6px); }
.leader:hover > span { color: var(--navy); }
.leader h3 { margin-top: 90px; font-size: 26px; }
.leader p { margin-top: 6px; font-size: 14px; opacity: 0.65; }

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

.contact-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 6%;
    text-align: center;
    background: var(--yellow);
}
.contact-content { max-width: 900px; }
.contact-section .section-label { justify-content: center; }
.contact-section .section-label::before { background: var(--navy); }
.contact-section h2 { font-size: clamp(40px, 6vw, 76px); }
.contact-section p { max-width: 520px; margin: 24px auto 32px; line-height: 1.7; opacity: 0.75; }
.contact-section small { display: block; margin-top: 30px; font-weight: 700; letter-spacing: 0.12em; }

/* =========================
   FOOTER
========================= */

.footer {
    margin-top: 160px;

    padding-top: 55px;

    background: #DBD7CA;
    color: #080808;
}

.footer-main {
     width:min(1400px,calc(100% - 52px));
  margin:auto;
  display:grid;
  grid-template-columns:1.7fr repeat(4,1fr);
  gap:45px;
  padding-bottom:60px
}

.footer-brand img {width: 170px;
}

.footer-brand h2 {
      margin-top:7px;
  font:700 24px "Montserrat",sans-serif
}

.footer-brand p {
    margin-top: 5px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.footer-brand strong {
    display: block;

    margin-top: 9px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-column h3 {
    margin-bottom: 9px;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.footer-column a {
    color:#444;
  text-decoration:none;
  font:500 14px/1.4 "Montserrat",sans-serif;
  transition:color .2s ease
}

.footer-column a:hover {
    color: #F3B429;
}

.footer-bottom {
    padding:20px;
  border-top:1px solid rgba(0,0,0,.2);
  text-align:center;
  color:#666;
  font:500 13px/1.5 "Montserrat",sans-serif
}

/* =========================
   ANIMATIONS
========================= */

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* cards in a grid appear one after another */
.foundation-card:nth-child(3n+2), .product-card:nth-child(3n+2), .leader:nth-child(3n+2) { transition-delay: 0.12s; }
.foundation-card:nth-child(3n), .product-card:nth-child(3n), .leader:nth-child(3n) { transition-delay: 0.24s; }

@keyframes rise   { from { opacity: 0; transform: translateY(30px); } }
@keyframes glow   { to { opacity: 0.6; transform: scale(1.08); } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  { 50% { transform: scale(1.5); opacity: 0.6; } }
@keyframes bounce { 50% { transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}

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

@media (max-width: 1000px) {
    .nav-links{gap:25px}
  .logo{gap:10px}
  .logo-text{font-size:17px;letter-spacing:0.08em}
  .business{grid-template-columns:1fr}
  .footer-main{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:1/-1}
}

@media (max-width: 800px) {
    .menu {display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 80px;
        right: 18px;
        width: 220px;
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        background: #081D2F;
        border-radius: 15px;
    }

  .nav-links.open{display:flex}
  .nav-links a:hover:after,
  .nav-links a.active:after{display:none}
}

@media (max-width: 600px) {
     .header{padding:8px 8px 0;
    top:-8px}
  .navbar{min-height:62px;padding:0 14px}
  .logo img{width:65px}
  .logo-text{font-size:15px;letter-spacing:0.06em}
}

@media (max-width: 360px) {
  .logo{gap:8px}
  .logo-text{font-size:13px}
}

@media (max-width: 1000px) {
    .split-section, .doctrine, .research, .support-grid, .featured-product { grid-template-columns: 1fr; gap: 40px; }
    .doctrine-intro, .research-intro { position: static; }
    .product-grid, .leadership-grid { grid-template-columns: repeat(2, 1fr); }
    .foundation-grid { grid-template-columns: repeat(4, 1fr); }
    .foundation-card:nth-child(4) { grid-column: span 2; }
    .foundation-card:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 650px) {
    .section, .sectors { padding: 70px 0; }
    .edgedesk { padding: 40px 0 0; }
    .edgedesk .featured-product { margin: 0 10px; }
    .foundation-grid, .product-grid, .leadership-grid, .work-grid { grid-template-columns: 1fr; }
    .foundation-card, .foundation-card:nth-child(4), .foundation-card:nth-child(5) { grid-column: auto; }
    .work-card.large { grid-column: auto; }
    .hero, .dark-section, .contact-section { margin: 10px 10px 0; }
    .scroll-indicator { display: none; }
    .footer-main { grid-template-columns: 1fr; }
}


/* =========================
   PHOTO SPACES
========================= */

.photo { aspect-ratio: 4 / 5; margin-bottom: 24px; border-radius: var(--radius); overflow: hidden; }
.photo > * { width: 100%; height: 100%; }
.photo img { display: block; object-fit: cover; transition: transform 0.6s; }
.photo:hover img { transform: scale(1.05); }
.photo-placeholder { display: grid; place-items: center; border: 2px dashed rgba(128, 128, 128, 0.55); border-radius: var(--radius); background: rgba(128, 128, 128, 0.1); font-size: 34px; }
.photo-placeholder i { color: var(--yellow); }
.leader .photo ~ h3 { margin-top: 14px; }

/* BSP photo space (replaces the animated graphic) */
.product-image { background: none; }
.product-image::before, .product-image::after { display: none; }
.product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.featured-product:hover .product-image img { transform: scale(1.05); }
.product-image .photo-placeholder { min-height: 340px; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); }

/* Product cards: "Explore" link like the BSP one */
.product-card .text-link {
    margin-top: 24px;
    color: var(--navy);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s, color 0.3s;
}
.product-card:hover .text-link { color: var(--yellow); opacity: 1; transform: none; }
@media (hover: none) { .product-card .text-link { opacity: 1; transform: none; color: var(--yellow); } }
.product-card .text-link:hover { color: var(--yellow-hover); }

/* Our approach: reading rows (no arrows, no sliding) */
.stack-item { position: relative; }
.stack-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--yellow); border-radius: 4px; transform: scaleY(0); transition: transform 0.35s; }
.stack-item:hover { padding-left: 28px; }
.stack-item:hover::before { transform: scaleY(1); }
.stack-item > span { transition: transform 0.3s; }
.stack-item:hover > span { transform: scale(1.2); }
.stack-item > b { align-self: center; justify-self: end; width: 14px; height: 14px; border: 2px solid var(--yellow); border-radius: 50%; transition: background 0.3s, transform 0.3s; }
.stack-item:hover > b { background: var(--yellow); transform: scale(1.3); }

/* =========================
   PARTNERS (logo orbit)
========================= */

.partners-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.partners-text p { max-width: 520px; margin-top: 22px; line-height: 1.7; opacity: 0.75; }
.partners-hint { display: block; margin-top: 28px; color: var(--yellow); font: 700 11px "Montserrat", sans-serif; letter-spacing: 0.16em; }

/* The orbit is a square. cqw = 1% of its width, so everything scales with it. */
.orbit {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 1;
    justify-self: center;
    margin-bottom: 70px;     /* room for the name tag under the bottom logo */
    container-type: inline-size;
    --r: 38cqw;              /* orbit radius */
    --node: 19cqw;           /* logo circle size */
    --hub: 14cqw;            /* hub radius */
}

/* Dashed guide circles */
.orbit-track {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 50%;
}
.orbit-track.inner {
    width: calc(var(--r) * 1.2);
    height: calc(var(--r) * 1.2);
    margin: calc(var(--r) * -0.6) 0 0 calc(var(--r) * -0.6);
    border-color: rgba(243, 180, 41, 0.35);
    animation: orbit-spin 50s linear infinite reverse;
}

/* Centre hub (layer 3) */
.orbit-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: calc(var(--hub) * 2);
    height: calc(var(--hub) * 2);
    margin: calc(var(--hub) * -1) 0 0 calc(var(--hub) * -1);
    display: grid;
    place-content: center;
    text-align: center;
    border: 2px solid rgba(243, 180, 41, 0.6);
    border-radius: 50%;
    background: radial-gradient(circle, #12395c, var(--navy));
    animation: hub-glow 3s ease-in-out infinite;
}
.orbit-hub span { font: 700 clamp(11px, 3.4cqw, 19px) "Montserrat", sans-serif; letter-spacing: 0.14em; }
.orbit-hub small { margin-top: 4px; color: var(--yellow); font: 700 clamp(8px, 1.9cqw, 11px) "Montserrat", sans-serif; letter-spacing: 0.2em; }

/* The ring spins; each logo spins back the other way so it stays upright.
   z-index 4 puts the ring (and the name tags in it) ABOVE the hub. */
.orbit-ring { position: absolute; inset: 0; z-index: 4; list-style: none; animation: orbit-spin 60s linear infinite; }

.orbit-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--node);
    height: var(--node);
    margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
    /* rotate to the node's angle, push out by the radius, rotate back */
    transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
}
.orbit-node:hover { z-index: 5; }

/* Line from each logo to the edge of the hub */
.orbit-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: calc(var(--r) - var(--hub));
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, var(--yellow), transparent);
    opacity: 0.25;
    transform-origin: 0 50%;
    transform: rotate(calc(var(--a) + 180deg));
    pointer-events: none;
    transition: opacity 0.4s;
}
.orbit-node:hover .orbit-spoke { opacity: 1; }

.orbit-logo { position: relative; width: 100%; height: 100%; animation: orbit-spin 60s linear infinite reverse; }

.orbit-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 10px 25px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.orbit-card img { width: 68%; height: 68%; object-fit: contain; }
.orbit-node:hover .orbit-card { transform: scale(1.2); box-shadow: 0 0 0 4px var(--yellow), 0 0 40px rgba(243, 180, 41, 0.6); }

/* Name tag: sits on .orbit-logo (not the scaled card), breaks into two lines
   wherever the HTML name has a line break, and is always above the hub */
.orbit-logo::after {
    content: attr(data-name);
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    width: max-content;
    padding: 7px 14px;
    border-radius: 14px;
    background: var(--yellow);
    color: var(--navy);
    font: 700 11px/1.35 "Montserrat", sans-serif;
    letter-spacing: 0.06em;
    text-align: center;
    white-space: pre-line;
    opacity: 0;
    transform: translate(-50%, 6px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}
.orbit-node:hover .orbit-logo::after { opacity: 1; transform: translate(-50%, 0); }

/* Hovering anywhere on the orbit pauses it, so logos are easy to read */
.orbit:hover .orbit-ring,
.orbit:hover .orbit-logo,
.orbit:hover .orbit-track.inner { animation-play-state: paused; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes hub-glow { 0%, 100% { box-shadow: 0 0 30px rgba(243, 180, 41, 0.2); } 50% { box-shadow: 0 0 70px rgba(243, 180, 41, 0.45); } }

@media (max-width: 900px) {
    .partners-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* Phones: slightly smaller name tags so they never touch the screen edge */
@media (max-width: 600px) {
    .orbit-logo::after { padding: 6px 10px; font-size: 10px; letter-spacing: 0.02em; }
}

/* Enlarge only the MeitY logo */
.orbit-card.meity-card img {
    width: 90%;
    height: 90%;
    max-width: none;
    object-fit: contain;
}


/* =========================
   CONTACT (self-contained: yellow section, 08 / START A CONVERSATION)
========================= */

#contact.contact-section {
    margin: 18px 18px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 6%;
    text-align: center;
    background: #F3B429;
    color: #080808;
    border-radius: 19px;
}
#contact .contact-content { max-width: 900px; }

#contact .section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font: 700 12px "Montserrat", sans-serif;
    letter-spacing: 0.16em;
}
#contact .section-label::before { content: ""; width: 28px; height: 3px; background: #081D2F; }

#contact h2 {
    margin-top: 16px;
    font: 300 clamp(40px, 6vw, 76px)/1.1 "Montserrat", sans-serif;
    letter-spacing: -0.03em;
}
#contact h2 span { display: block; font-weight: 700; }

#contact p { max-width: 520px; margin: 24px auto 32px; line-height: 1.7; opacity: 0.75; }

#contact .button {
    display: inline-flex;
    align-items: center;
    padding: 15px 28px;
    border-radius: 19px;
    font: 700 14px "Montserrat", sans-serif;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
#contact .dark-button { background: #081D2F; color: #fff; }
#contact .dark-button:hover { background: #080808; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }

#contact small { display: block; margin-top: 30px; font-weight: 700; letter-spacing: 0.12em; }

@media (max-width: 600px) {
    #contact.contact-section { margin: 10px 10px 0; }
}

/* =========================
   OUR APPROACH: 3 + 2 staggered image + text grid (section 02)
========================= */

.approach-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 24px;
}

/* Each card: image on top, text below. Cards 4 and 5 sit between the top three */
.approach-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.approach-card:nth-child(4) { grid-column: 2 / span 2; }
.approach-card:nth-child(5) { grid-column: 4 / span 2; }

/* Bottom row: text on top, image below (alternates with the top row) */
.approach-card.flip { flex-direction: column-reverse; }

.approach-photo {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: #0d2840;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.approach-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.approach-card:hover .approach-photo {
    transform: translateY(-8px);
    box-shadow: 0 0 0 2px var(--yellow), 0 22px 40px rgba(0, 0, 0, 0.35);
}
.approach-card:hover .approach-photo img { transform: scale(1.08); }

.approach-num {
    display: block;
    color: var(--yellow);
    font: 700 clamp(40px, 4.4vw, 60px)/1 "Montserrat", sans-serif;
    letter-spacing: -0.03em;
    transform-origin: left center;
    transition: transform 0.4s ease;
}
.approach-card:hover .approach-num { transform: scale(1.12); }

.approach-text h3 {
    margin-top: 12px;
    color: var(--white);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.15;
}
.approach-text p {
    margin-top: 10px;
    color: var(--white);
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.7;
}

/* Tablet: one column, image beside text, alternating sides */
@media (max-width: 1000px) {
    .approach-grid { grid-template-columns: 1fr; gap: 28px; }
    .approach-card,
    .approach-card:nth-child(4),
    .approach-card:nth-child(5) {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 8px;
    }
    .approach-text { padding: 0 26px; }
    .approach-card.flip .approach-photo { order: 2; }
    .approach-card.flip .approach-text { text-align: right; }
    .approach-card.flip .approach-num { transform-origin: right center; }
}

/* Phones: image above text */
@media (max-width: 600px) {
    .approach-card,
    .approach-card:nth-child(4),
    .approach-card:nth-child(5) { grid-template-columns: 1fr; gap: 18px; }
    .approach-card.flip .approach-photo { order: 0; }
    .approach-card.flip .approach-text { text-align: left; }
    .approach-card.flip .approach-num { transform-origin: left center; }
    .approach-text { padding: 0; }
}

/* =========================
   ENGINEERING DOCTRINE: image on the left, fading into navy on the right
========================= */

.doctrine-frame { position: relative; }

.doctrine-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.doctrine-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}
/* Gradient: image shows on the left, fully navy by about 70% across */
.doctrine-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(8, 29, 47, 0.45) 0%,
        rgba(8, 29, 47, 0.72) 30%,
        rgba(8, 29, 47, 0.95) 55%,
        var(--navy) 72%);
}
.doctrine-frame > .container { position: relative; z-index: 1; }
.doctrine-frame .doctrine-intro { text-shadow: 0 2px 18px rgba(8, 29, 47, 0.8); }

@media (max-width: 1000px) {
    .doctrine-bg::after {
        background: linear-gradient(180deg,
            rgba(8, 29, 47, 0.55) 0%,
            rgba(8, 29, 47, 0.85) 35%,
            var(--navy) 65%);
    }
}


/* =========================
   PRODUCT CARDS: photo slots
========================= */

.product-card > span { display: block; }
.product-photo {
    aspect-ratio: 16 / 10;
    margin-top: 16px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(8, 29, 47, 0.08);
}
.product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.product-card:hover .product-photo img { transform: scale(1.06); }
.product-card .product-photo + h3 { margin-top: 22px; }


/* =========================
   PARTNERS: logo in the centre hub
========================= */


.orbit-hub {
  background: var(--white);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.orbit-hub img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(0.9);
}