:root{
  --charcoal:#2B2B2B;
  --slate:#4F5B66;
  --wine:#770737;
  --ink:#111;
  --paper:#FAFAFA;
  --muted:#9BA3AE;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:#EAEFF5;}
html{scroll-behavior:smooth;}
body{font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:linear-gradient(180deg,#121214 0%, #181a1f 100%);}

.container{width:min(1100px, 92vw); margin:0 auto;}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(17,17,17,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand-wrap{display:flex; align-items:center; gap:10px;}
.brand-logo{width:28px; height:28px; object-fit:contain; filter:brightness(1.2) contrast(1.05);}
.brand{font-family:'Rajdhani', sans-serif; font-weight:700; letter-spacing:.5px; color:#fff; font-size:1.25rem;}

.nav{display:flex; align-items:center; gap:10px;}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:1px solid rgba(255,255,255,.14); padding:8px 12px; border-radius:999px; font-weight:600; font-size:.95rem;}
.btn:hover{border-color:rgba(255,255,255,.3);}
.btn-ghost{background:transparent; color:#D3D8E0;}
.btn-primary{background:var(--wine); color:#fff; border-color:transparent;}
.btn-primary:hover{filter:brightness(1.1);}

.nav-toggle{display:none; background:transparent; border:0; cursor:pointer;}
.nav-toggle span{display:block; width:22px; height:2px; background:#fff; margin:5px 0;}

.hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06);}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60vh;
  background:radial-gradient(600px 300px at right -10% top 40%, rgba(119,7,55,.35), transparent),
             radial-gradient(500px 260px at left -10% top -10%, rgba(79,91,102,.25), transparent);
  filter:blur(20px); z-index:0;
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:72px 0;}
.hero h1{font-family:'Rajdhani', sans-serif; font-size:clamp(2.2rem, 4.5vw, 3.8rem); margin:0; color:#fff;}
.accent-dot{display:inline-block; width:.5em; height:.5em; background:var(--wine); border-radius:50%; margin-left:.25em; vertical-align:middle;}
.tagline{font-size:1.15rem; color:#EAEFF5; margin:.6rem 0 0.4rem;}
.sub{color:#C5CCD6; max-width:60ch;}
.hero-media img{width:100%; height:auto; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#0f0f12;}

.section{padding:72px 0;}
.section-title{
  font-family:'Rajdhani', sans-serif; font-weight:700; letter-spacing:.5px;
  color:#fff; margin:0 0 18px; font-size:1.6rem; position:relative;
}
.section-title::after{content:""; display:block; width:52px; height:3px; background:var(--wine); margin-top:10px; border-radius:3px;}

.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:start;}
.about p{color:#D5DBE5; line-height:1.7; margin:0 0 14px;}
.about-image img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:#0f0f12;}

.showcase .card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.card{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden;}
.card .media{position:relative; background:#0f0f12;}
.card .media img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover;}
.card .content{padding:14px 14px 16px;}
.card .content h4{margin:0 0 6px; color:#fff; font-size:1.05rem;}
.card .content p{margin:0; color:#C5CCD6; font-size:.98rem; line-height:1.6;}

.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:22px 0; color:#AEB7C2; position:relative;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.footer-left{display:flex; align-items:center; gap:10px;}
.footer-logo{width:26px; height:26px; object-fit:contain;}
.btn-return{position:relative;}

.edit-id{opacity:.55; margin-left:.4em; font-size:.9em; color:#9BA3AE;}

@media (max-width: 960px){
  .hero-inner, .about-grid{grid-template-columns:1fr;}
  .nav{display:none;}
  .nav.open{display:flex; flex-direction:column; gap:10px; padding:10px 0;}
  .nav-toggle{display:block;}
}
@media (max-width: 640px){
  .showcase .card-grid{grid-template-columns:1fr;}
}


/* Founder photo layout + sizing (non-destructive) */
.founder-photo{
  display:inline-block;
  float:left;
  margin: 0 1rem 1rem 0; /* space to the right and bottom */
  max-width: 66.666%;
  height: auto;
  object-fit: cover;
}
/* Ensure text wraps around image on larger screens and resets on small screens */
@media (min-width: 768px){
  .founder-photo{ max-width: 33%; } /* allow a third column width on medium+ screens */
}



/* Showcase cards equalized layout */
.showcase-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.showcase-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.showcase-card p{
  flex-grow:1;
}



/* Equalize card heights and text blocks */
.card{display:flex; flex-direction:column; height:100%;}
.card .media{position:relative;}
.card .media img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block;}
.card .content{flex:1; display:flex; flex-direction:column;}
.card .content h4{margin-bottom:8px;}
.card .content p{margin-top:0; margin-bottom:0; line-height:1.55;}
/* Make the grid auto-fill balanced rows at larger widths */
@media (min-width: 900px){
  .showcase .card-grid{grid-template-columns:repeat(3, 1fr);}
}



/* Ensure About section founder-photo and text equal height */
.about-grid{align-items:stretch;}
.about-grid > div{display:flex; flex-direction:column;}
.about-grid .about-image, .about-grid .about-image img{height:100%; object-fit:cover;}



/* Tighter About section alignment */
.about-grid{align-items:stretch; gap:32px;}
.about-grid .about-image img{
  width:100%; height:100%; object-fit:cover; border-radius:18px;
}

/* Adjust typography for balance */
.about .section-title{font-size:1.8rem; margin-bottom:1rem;}
.about p{font-size:1.05rem; line-height:1.65;}

/* On larger screens, scale text slightly to balance with portrait */
@media (min-width: 992px){
  .about .section-title{font-size:2rem;}
  .about p{font-size:1.1rem;}
}



/* Refined About section spacing to reduce black space */
.about-grid{align-items:start; gap:20px;}
.about-grid > div{display:block;}
.about-grid .about-image img{
  width:100%; height:auto; object-fit:cover; border-radius:18px;
  max-height:500px;
}

/* Typography refinements for better visual balance */
.about .section-title{font-size:1.8rem; margin-bottom:0.6rem;}
.about p{font-size:1.05rem; line-height:1.6; margin-bottom:0.8rem;}



/* Baseline alignment for About section */
.about-grid{align-items:flex-start; gap:24px;}
.about-grid .about-image img{
  width:100%; height:auto; object-fit:cover; border-radius:18px;
  max-height:460px;
}
.about .section-title{margin-bottom:0.8rem; font-size:1.9rem;}
.about p{font-size:1.05rem; line-height:1.65;}



/* --- About section: 'like this' alignment --- */
.about{padding-top:18px;}
.about .section-title{font-size:1.75rem; margin-bottom:10px; line-height:1.2;}
.about-grid{display:grid; grid-template-columns:1fr; gap:16px; align-items:start;}
.about p{font-size:1.02rem; line-height:1.55; margin:0 0 10px;}

/* Desktop: fixed portrait height, image left, text right, reduced whitespace */
@media (min-width: 900px){
  .about-grid{grid-template-columns: 340px 1fr; gap:24px; align-items:start;}
  .about-image{align-self:start;}
  .about-image img{height:340px; width:100%; object-fit:cover; border-radius:16px;}
  .about .section-title{font-size:1.9rem; margin-bottom:8px;}
  .about p{font-size:1.06rem; line-height:1.6;}
}

/* XL screens: nudge sizes for balance */
@media (min-width: 1200px){
  .about-grid{grid-template-columns: 360px 1fr; gap:26px;}
  .about-image img{height:360px;}
  .about .section-title{font-size:2rem;}
}



/* Rollback founder photo size one step smaller */
@media (min-width: 900px){
  .about-grid{grid-template-columns: 300px 1fr; gap:22px;}
  .about-image img{height:300px;}
}
@media (min-width: 1200px){
  .about-grid{grid-template-columns: 320px 1fr; gap:24px;}
  .about-image img{height:320px;}
}



/* Enlarge founder photo to match desired state */
@media (min-width: 900px){
  .about-grid{grid-template-columns: 380px 1fr; gap:28px;}
  .about-image img{height:380px;}
}
@media (min-width: 1200px){
  .about-grid{grid-template-columns: 400px 1fr; gap:30px;}
  .about-image img{height:420px;}
}



/* Founder photo: scale up per request while keeping text as-is */
@media (min-width: 900px){
  .about-grid{grid-template-columns: 380px 1fr; gap:24px;}
  .about-image img{height:380px; width:100%; object-fit:cover; border-radius:16px;}
}
@media (min-width: 1200px){
  .about-grid{grid-template-columns: 400px 1fr; gap:26px;}
  .about-image img{height:400px;}
}
@media (min-width: 1440px){
  .about-grid{grid-template-columns: 420px 1fr; gap:28px;}
  .about-image img{height:420px;}
}



/* Double founder photo size */
@media (min-width: 900px){
  .about-grid{grid-template-columns: 760px 1fr; gap:32px;}
  .about-image img{height:760px; width:100%; object-fit:cover; border-radius:16px;}
}
@media (min-width: 1200px){
  .about-grid{grid-template-columns: 800px 1fr; gap:34px;}
  .about-image img{height:800px;}
}
@media (min-width: 1440px){
  .about-grid{grid-template-columns: 840px 1fr; gap:36px;}
  .about-image img{height:840px;}
}



/* Fix About layout: larger founder photo (taller) but keep text column wide */
@media (min-width: 900px){
  .about-grid{grid-template-columns: 360px 1fr; gap:24px;}
  .about-image img{width:100%; height:500px; object-fit:cover; border-radius:16px;}
}
@media (min-width: 1200px){
  .about-grid{grid-template-columns: 380px 1fr; gap:26px;}
  .about-image img{height:560px;}
}
@media (min-width: 1440px){
  .about-grid{grid-template-columns: 400px 1fr; gap:28px;}
  .about-image img{height:600px;}
}



/* === Desired About layout ===
   Keep text wide; make portrait larger by height only.
   Lock image column around 360–380px so the text column remains wide.
*/
@media (min-width: 900px){
  .about-grid{
    grid-template-columns: 360px 1fr !important;
    gap: 26px !important;
    align-items: start !important;
  }
  .about-image{align-self:start !important;}
  .about-image img{
    width: 100% !important;
    height: 520px !important;   /* substantial presence */
    object-fit: cover !important;
    border-radius: 16px !important;
  }
}
@media (min-width: 1200px){
  .about-grid{
    grid-template-columns: 380px 1fr !important;
    gap: 28px !important;
  }
  .about-image img{ height: 560px !important; }
}
@media (min-width: 1440px){
  .about-grid{ grid-template-columns: 380px 1fr !important; gap: 30px !important; }
  .about-image img{ height: 600px !important; }
}



/* Prevent founder photo cropping; keep natural aspect ratio */
@media (min-width: 900px){
  .about-grid{ grid-template-columns: 380px 1fr !important; gap: 28px !important; }
  .about-image img{
    width: 100% !important;
    height: auto !important;       /* let the image keep its natural aspect ratio */
    max-height: 600px !important;  /* cap height so it doesn't overwhelm */
    object-fit: contain !important;/* ensure full image is visible, no cropping */
    object-position: center center !important;
    border-radius: 16px !important;
  }
}



/* About section: enlarge photo vertically, minimize gap, keep text wide */
@media (min-width: 900px){
  .about-grid{
    grid-template-columns: 370px 1fr !important;
    gap: 14px !important;   /* tighter gap between photo and text */
    align-items: start !important;
  }
  .about-image img{
    width: 100% !important;
    height: auto !important;
    max-height: 600px !important;  /* large, but not overwhelming */
    object-fit: contain !important;
    border-radius: 16px !important;
  }
}
@media (min-width: 1200px){
  .about-grid{
    grid-template-columns: 380px 1fr !important;
    gap: 16px !important;
  }
  .about-image img{ max-height: 640px !important; }
}



/* Tighten gap and enlarge founder photo while keeping text width/position */
@media (min-width: 900px){
  .about-grid{
    grid-template-columns: 370px 1fr !important; /* fixed image column to avoid pushing text */
    gap: 12px !important;                        /* minimal space between image and text */
    align-items: start !important;
  }
  .about-image img{
    width: 100% !important;
    height: auto !important;      /* preserve aspect ratio, no crop */
    max-height: 640px !important; /* larger presence within available space */
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 16px !important;
  }
}
@media (min-width: 1200px){
  .about-grid{ grid-template-columns: 380px 1fr !important; gap: 12px !important; }
  .about-image img{ max-height: 700px !important; }
}



/* ULTRA-SPECIFIC OVERRIDE: minimal space between photo and text */
@media (min-width: 900px){
  section.about .container .about-grid{
    grid-template-columns: 380px 1fr !important;
    gap: 8px !important;
    column-gap: 8px !important;
    align-items: start !important;
  }
  section.about .container .about-grid > *{
    margin: 0 !important;
    padding: 0 !important;
  }
  section.about .container .about-grid .about-image{
    margin: 0 !important;
  }
  section.about .container .about-grid .about-image img{
    width: 100% !important;
    height: auto !important;
    max-height: 700px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
  }
}



/* FINAL ABOUT SECTION STYLE (per user screenshot) */
@media (min-width: 900px){
  .about-grid{
    grid-template-columns: 370px 1fr !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .about-image img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    max-height: none !important; /* no artificial cap */
  }
}
@media (min-width: 1200px){
  .about-grid{
    grid-template-columns: 380px 1fr !important;
    gap: 18px !important;
  }
}



/* === FINAL ABOUT LAYOUT (natural proportions, no equal height) === */
@media (min-width: 900px){
  .about-grid{
    grid-template-columns: 370px 1fr !important; /* fixed image column */
    gap: 14px !important;                        /* small, consistent gap */
    align-items: start !important;               /* top-align text next to image */
  }
  .about-image, .about-image img{
    margin: 0 !important;
    padding: 0 !important;
  }
  .about-image img{
    display: block !important;
    width: 100% !important;
    height: auto !important;       /* keep natural aspect ratio */
    max-height: none !important;   /* remove previous caps */
    object-fit: contain !important;/* no cropping */
    border-radius: 20px !important;
  }
}



/* CLEAN FINAL RESET for About section */
@media (min-width: 900px){
  .about-grid {
    display: grid !important;
    grid-template-columns: 360px 1fr !important; /* balanced: fixed image column + wide text */
    column-gap: 20px !important;                /* natural breathing space */
    align-items: start !important;              /* top-align */
  }
  .about-grid .about-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;        /* natural aspect ratio */
    object-fit: cover !important;   /* fill box without distortion */
    object-position: top center !important; /* anchor so head/upper body stay visible */
    border-radius: 14px !important; /* consistent rounded corners */
  }
}



/* === Make photo larger without shifting text === */
@media (min-width: 900px){
  .about-grid{
    grid-template-columns: 370px 1fr !important;
    column-gap: 8px !important;
    overflow: visible !important;
    align-items: start !important;
  }
  .about-image{ position: relative; z-index: 0; }
  .about-image img{
    display: block !important;
    width: 410px !important;     /* wider than its column */
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    margin-right: -40px !important; /* bleed into the gap */
    border-radius: 20px !important;
  }
}
@media (min-width: 1200px){
  .about-grid{ column-gap: 8px !important; }
  .about-image img{
    width: 450px !important;     /* a bit larger on XL screens */
    margin-right: -60px !important;
  }
}

/* ===Gemini additions===*/
/* --- MODERN & DYNAMIC STYLES --- */

/* ** 1. Hero Section ** */
.hero {
  position: relative;
  overflow: hidden;
  /* Use a subtle inset shadow and border for depth */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.1);
}

/* Updated background effect - softer gradient */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 80vh;
  /* Soft, centered radial gradient for light source effect */
  background: radial-gradient(60% 40% at center top, rgba(119, 7, 55, 0.2), transparent),
              radial-gradient(70% 50% at 50% 10%, rgba(79, 91, 102, 0.15), transparent);
  filter: blur(40px);
  z-index: 0;
}

.hero-inner {
  display: grid;
  /* Use a modern, slightly off-balance grid layout for visual interest */
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px; /* Increased gap */
  align-items: center;
  padding: 80px 0 100px; /* More vertical breathing room */
}

/* Subtle change to text for better contrast */
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  letter-spacing: -0.5px;
}

.tagline {
  font-size: 1.3rem; /* Emphasize the tagline */
  font-weight: 500;
  color: var(--oa-gold-1); /* Use the gold from unified CSS for accent */
  text-shadow: 0 0 5px rgba(244, 224, 138, 0.3);
}

.sub {
  font-size: 1.05rem;
  max-width: 65ch;
  color: #c9d1d9;
}

.hero-media img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  /* Add a stronger, multi-layered box shadow for a 'floating' effect */
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.5), 
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 80px rgba(119, 7, 55, 0.15); /* Subtle glow */
  transition: transform 0.4s ease-out;
}

.hero-media img:hover {
  transform: translateY(-4px) scale(1.01); /* Interactive lift on hover */
}


/* ** 2. Showcase Section (Capabilities) ** */

.showcase .card-grid {
  display: grid;
  /* Adaptive Grid: 1 column on mobile, 2-3 on desktop, ensuring cards always look balanced */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; /* Increased gap between cards */
}

.card {
  /* Use a subtle 'glass' effect and stronger border for material design */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px; /* Slightly more rounded corners */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card:hover {
  /* Interactive focus: lift the card and add a stronger shadow/glow */
  transform: translateY(-6px);
  box-shadow: 
    0 12px 20px rgba(0, 0, 0, 0.4), 
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 30px rgba(119, 7, 55, 0.4); /* Burgundy highlight */
}

.card .media img {
  /* Make the image a focal point by covering the aspect ratio and ensuring quality */
  aspect-ratio: 4 / 3; /* More horizontal focus */
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .media img {
  transform: scale(1.05); /* Slight zoom on image hover */
}

.card .content {
  padding: 18px 20px 20px; /* More padding inside the card */
}

.card .content h4 {
  font-size: 1.25rem; /* Larger, more readable titles */
  color: var(--oa-gold-2); /* Gold accent for titles */
  margin: 0 0 10px;
}

.card .content p {
  font-size: 1rem;
  color: #e9eaee;
  line-height: 1.6;
}

/* ** 3. Responsive Adjustments ** */

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr; /* Stack on smaller screens */
    padding: 60px 0;
  }
  .hero-media {
    order: -1; /* Move media above copy on mobile */
  }
  .hero-media img {
    margin-bottom: 20px;
  }
  .showcase .card-grid {
    grid-template-columns: 1fr;
  }
}