/*
  ========== Corporate Theme (sophisticated + modern) ==========

  We’ve refreshed the site’s palette and typography to feel more polished
  and energetic. Heading typefaces use Montserrat for bold, geometric
  shapes, while body copy uses Inter for excellent readability.  We also
  introduce gradient text on section titles and keywords to draw the
  reader’s eye to important concepts without overwhelming the design.

  Customisation variables live on :root so colours and fonts can be
  adjusted in one place.  If you need additional accent colours in the
  future, define them here and reference them in the gradients below.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  /* Core brand colours */
  --brand-900:#012a5e;       /* deep navy for primary headings */
  --brand-800:#073c84;       /* slightly lighter navy */
  --brand-700:#0a4ea8;       /* mid blue for accents */
  --accent-500:#1a73e8;      /* bright primary accent (buttons, highlights) */
  --accent-400:#54a0ff;      /* secondary accent for gradients */
  --accent-300:#a770ff;      /* tertiary accent to bring warmth */

  /* Neutral palette */
  --bg:#ffffff;              /* page background */
  --fg:#0f172a;              /* primary text colour */
  --muted:#475569;           /* secondary text colour */
  --border:#e2e8f0;          /* subtle border colour */
  --card:#ffffff;            /* card background */
  --shadow:0 12px 34px rgba(2,12,27,.08);

  /* Border radius */
  --radius:14px;

  /* Typography */
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading:'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Distinct hero headline font for a touch of sophistication */
  --font-hero:'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  /* Use Inter for body text with comfortable line height */
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

/* When keyboard users focus the skip link, reveal it */
.skip:focus{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  clip:auto;
  background:#fff;
  color:var(--brand-900);
  padding:8px 12px;
  border:2px solid var(--brand-900);
  border-radius:8px;
  z-index:100;
  text-decoration:none;
}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--brand-900)}
.brand-logo{height:30px;width:auto;object-fit:contain;display:block}
.brand-word{
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
nav a{
  color: var(--brand-900);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .04em;
}
/* On hover, links shift to a slightly lighter navy for clarity */
/* Override accent-coloured hover with a darker tone for reliability */
nav a:hover{
  color: var(--brand-700);
}
.top-cta{display:flex;align-items:center;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:700;border:1px solid transparent;transition:transform .04s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background: linear-gradient(90deg, var(--accent-500), var(--accent-300));
  color: #fff;
}
.btn.primary:hover{
  filter: brightness(1.08);
  box-shadow: var(--shadow);
}
.btn.outline{
  /* Use the deepest brand colour for outline buttons to convey stability */
  border-color: var(--brand-900);
  color: var(--brand-900);
}
.btn.outline:hover{
  /* Subtle tint on hover for dark outline buttons */
  background: rgba(1, 42, 94, 0.08);
}
.mobile-toggle{display:none;background:transparent;border:0;padding:8px}
.mobile-menu{display:none;border-top:1px solid var(--border)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px 0;color:var(--muted)}

/* Hero */
.hero{position:relative;isolation:isolate;color:#fff;background:linear-gradient(140deg,var(--brand-900),var(--brand-800) 50%,var(--brand-900));overflow:hidden}
.hero::after{content:"";position:absolute;inset:-30% -10% auto auto;width:70vw;height:70vw;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent 70%);border-radius:50%;z-index:-1}
.hero .inner{display:grid;grid-template-columns:1fr;gap:44px;padding:96px 0}
.eyebrow{
  color: rgba(255,255,255,0.85);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
h1{
  /* Slightly smaller size for hero headline to improve readability */
  font-size:clamp(34px,6vw,52px);
  line-height:1.1;
  margin:10px 0 20px;
  font-family:var(--font-heading);
  font-weight:700;
  /* Use the dedicated hero font and a clean white colour for the hero headline.
     The gradient background has been removed entirely for a crisp, professional
     look that stands out against the dark hero backdrop. */
  font-family: var(--font-hero);
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff;
}
.lead{
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,0.95);
  max-width: 62ch;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}
.hero-ctas{display:flex;gap:12px;margin-top:20px}
.fact-band{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.fact{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:16px 18px}
.fact b{display:block;font-size:22px;color:#fff}
  
/* Three highlight chips */
.owner-highlights{margin-top:18px;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.highlight{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  /* Energetic diagonal gradient for highlight chips */
  background: linear-gradient(135deg, rgba(26,115,232,0.16), rgba(167,112,255,0.16));
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  padding: 16px 14px;
  /* Slightly stronger blur/saturation for depth on translucent chip */
  backdrop-filter: saturate(140%) blur(3px);
}
.highlight p{margin:0;color:rgba(255,255,255,.96)}
.highlight svg{flex:0 0 26px}

/* Sections / cards */
section {
  padding: 80px 0;
}

/* Section headings and intro text */
/*
  Section titles
  --------------
  Headings throughout the page now use a darker gradient pulled from the
  core brand palette. This shift from bright accents to rich navy
  reinforces trust and reliability while still carrying a hint of
  sophistication through the subtle gradient. We clamp the font size
  responsively to ensure legibility on desktop and mobile.
*/
.section-title {
  /* Reduce section heading size for a more comfortable hierarchy */
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.18;
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  /* Darker gradient for a more professional tone */
  background-image: linear-gradient(90deg, var(--brand-900), var(--brand-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-lead {
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 32px;
  /* Smaller body copy for section introductions */
  font-size: 1rem;
  line-height: 1.5;
}

/* Emphasis within section lead text */
.section-lead strong {
  color: var(--accent-500);
  font-weight: 600;
}

/* Global emphasis styling for bold text outside of section lead */
strong {
  color: var(--accent-500);
  font-weight: 600;
}

/* Italicised emphasis for emphasised text */
em {
  font-style: italic;
  color: var(--accent-400);
}

/* Responsive grids for section content */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

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

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Card component used across the site */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 0 0 8px;
  /* Reduced card heading size to harmonise with new section titles */
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  /* Darker gradient on card titles to align with section headings */
  background-image: linear-gradient(90deg, var(--brand-900), var(--brand-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* Tiles for focus area grid */
.tile {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 140px;
  box-shadow: var(--shadow);
  transition: transform 0.1s ease, box-shadow 0.3s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(2, 12, 27, 0.1);
}

.tile strong {
  color: var(--brand-900);
}

.tile span {
  color: var(--muted);
}

/* Operating system pillar component */
.pillar {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: flex-start;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eef2ff;
  display: grid;
  place-items: center;
}

/* -------------------------------------------------------------------
   List styling
   Apply consistent spacing and accent-coloured markers to unordered lists
   across the site.  This subtle change draws attention to each point
   without overwhelming the eye.
*/
ul {
  padding-left: 1.2em;
  margin: 0 0 1.2em;
}
ul li {
  margin: 0.3em 0;
  color: var(--fg);
  line-height: 1.5;
}
/* Colour the list markers with the primary accent */
ul li::marker {
  color: var(--accent-500);
  font-weight: 600;
}

/* Contact form layout */
.contact-card {
  max-width: 760px;
  margin: 0 auto;
}

/* Honeypot field hidden off-screen */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
}

/* Form field container */
.field {
  display: block;
}

.field > span {
  display: block;
  font-size: 0.9rem;
  color: #334155;
  margin: 0 0 6px;
}

/* Input and textarea styling */
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font: 16px/1.5 var(--font);
  color: var(--fg);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.14);
}

/* Grid layout for the top row of the contact form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Actions row for the form (button + status) */
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

/* Status text for form submission */
.form-status {
  font-size: 0.95rem;
  color: #0b7;
}

.form-status.error {
  color: #b00;
}

/* Responsive adjustments for form on small screens */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Additional responsive layout adjustments */
@media (max-width: 960px) {
  /* Stack highlights in hero on small screens */
  .owner-highlights {
    grid-template-columns: 1fr;
  }

  /* Expand hero padding slightly on smaller screens */
  .hero .inner {
    padding: 90px 0;
  }

  /* Single column grids for OS, investors, careers */
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Make footers columns stack nicely */
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/*
  Mobile header adjustments
  ------------------------
  The default header is optimised for desktop with the full navigation visible and
  larger branding. On narrow screens we hide the primary nav links, show the
  hamburger toggle, and scale down the brand text and logo so that the header
  doesn’t overflow. These breakpoints target common tablet and phone widths.
*/

@media (max-width: 768px) {
  /* Hide the horizontal navigation and display the mobile toggle */
  nav ul {
    display: none;
  }
  .mobile-toggle {
    display: block;
  }
  /* Reduce the size of the brand text and logo */
  .brand-logo {
    height: 26px;
  }
  .brand-word {
    font-size: 0.875rem; /* 14px */
  }
  /* Adjust the height of the header bar to accommodate smaller content */
  .nav {
    height: 64px;
  }
  /* Reduce top CTA spacing */
  .top-cta {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  /* Further reduce branding sizes on very small screens */
  .brand-logo {
    height: 22px;
  }
  .brand-word {
    font-size: 0.75rem; /* 12px */
    letter-spacing: 0.06em;
  }
  /* Shrink button padding for contact CTA */
  .btn {
    padding: 10px 14px;
  }
}

@media (max-width: 560px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}