:root {
  --ink: #f9f4ed;
  --muted: #cbb9a8;
  --orange: #ff6a00;
  --orange-soft: #ff8a2a;
  --brown-950: #170903;
  --brown-900: #241006;
  --brown-850: #2b1509;
  --brown-800: #351b0c;
  --line: rgba(255, 255, 255, 0.12);
  --panel: rgba(255, 255, 255, 0.055);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --max: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* adjust to match your header height + gap */
  /* Fluid base: 14px at 320px viewport → 18px at 1728px viewport */
  font-size: clamp(14px, 0.278vw + 13.11px, 18px);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 106, 0, 0.18), transparent 29rem),
    radial-gradient(circle at 85% 10%, rgba(255, 138, 42, 0.12), transparent 30rem),
    linear-gradient(145deg, var(--brown-950), var(--brown-900) 48%, #120602);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Headings use Outfit for a precise, professional geometric feel */
h1, h2, h3, .pronunciation strong {
  font-family: "Outfit", Inter, ui-sans-serif, system-ui, sans-serif;
}

/* ─── HEADER ──────────────────────────────────────────────────────────────────
   Markup: "This scroll bar should be bigger and more proportional to the rest."
   Changes: increased vertical padding, slightly larger nav font, taller brand logo.
   ─────────────────────────────────────────────────────────────────────────── */
.site-header {
  width: min(var(--max), calc(100% - 36px));
  margin: 22px auto 0;
  /* Increased padding for a more proportional, substantial header bar */
  padding: 22px 32px; /* was 18px 24px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 14px;
  z-index: 20;
  border: 1px solid var(--line);
  background: rgba(23, 9, 3, 0.78);
  backdrop-filter: blur(18px);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* Markup: header logo/brand should be proportionally bigger */
.brand img {
  width: 13.0rem;	 /* was 11.5rem */
  height: 3.75rem;	 /* was 3.25rem */
  object-fit: contain;
  object-position: left center;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Markup: nav text should be more proportional — bumped from 0.9rem */
  font-size: 1.2rem;	 /* was 1rem */
  color: var(--muted);
}

.nav a {
  padding: 10px 16px;
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}

.nav a:hover, .nav a:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.section-shell {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto;
}

.hero {
  min-height: 76vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: 44px;
  padding: 5.5rem 0 3.5rem;
}

/* ─── EYEBROW ─────────────────────────────────────────────────────────────────
   Markup: "Aerospace advisory should be bigger font, just like the rest of the
   orange header." All eyebrow labels (hero, services, about, contact) share this
   single rule. Orange font size increased from 0.7rem to 1.5rem for consistency
   across all sections.
   ─────────────────────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 1rem;
  color: var(--orange-soft);
  /* Increased from 0.7rem — now consistent across hero, services, about, contact */
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

/* Proportional type scale — all scale together with html font-size */
h1 {
  margin-bottom: 1.5rem;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 760px;
  font-weight: 600;
}

h2 {
  margin-bottom: 1.125rem;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
}

h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.lead {
  max-width: 710px;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.125rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.button:hover, .button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────────────────
   Markup: "Contact KoonX Aero same colour as View services."
   Both CTA buttons now use the same ghost/outline style.
   ─────────────────────────────────────────────────────────────────────────── */
.button.primary {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.button.primary:hover, .button.primary:focus-visible {
  border-color: rgba(255, 106, 0, 0.45);
  background: rgba(255, 106, 0, 0.1);
}

.button.secondary {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

/* ─── HERO CARD ───────────────────────────────────────────────────────────────
   Markup: "Logo could be smaller."
   Reduced the logo inside the hero card mark-wrap.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-card {
  padding: 28px;	/* was 28px */
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    radial-gradient(circle at 40% 20%, rgba(255, 106, 0, 0.18), transparent 22rem);
  box-shadow: var(--shadow);
  overflow: hidden;
}


.mark-wrap {
  min-height: 160px;
  display: grid;
  place-items: center;     /* centers the logo both horizontally & vertically */
  width: fit-content;        /* shrinks the dark block to hug the logo */
  margin: 0 auto;            /* centers that block inside the card */
  padding: 20px 48px;
  border-radius: 22px;
  background: var(--brown-850);          /* #2b1509 */
  border: 1px solid rgba(255,255,255,0.09);
}


.mark-wrap img {
  width: min(60%, 220px);
  display: block;            /* removes any inline spacing quirks */
  margin: 0 auto;            /* extra insurance for horizontal centering */
}

.pronunciation {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.pronunciation span, .contact-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pronunciation strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.pronunciation p, .service-card p, .about-panel p, .contact-copy p, .contact-card p, .trust-strip span {
  color: var(--muted);
  line-height: 1.7;
}

/* ─── TRUST STRIP ─────────────────────────────────────────────────────────────
   Markup: "Orange fonts need to be bigger as mentioned in other screen shot."
   Trust strip strong labels bumped for better visual weight.
   ─────────────────────────────────────────────────────────────────────────── */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--line);
}

.trust-strip div {
  padding: 28px;
  background: rgba(255, 255, 255, 0.052);
}

.trust-strip strong {
  display: block;
  margin-bottom: 6px;
  /* Increased from 1.05rem for better visual weight */
  font-size: 1.15rem;
  font-weight: 600;
}

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr;
  gap: 44px;
  padding: 6.125rem 0 1.5rem;
}

.section-intro {
  position: sticky;
  top: 128px;
  align-self: start;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.service-card {
  min-height: 260px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.service-card:hover {
  transform: translateY(-4px);
  background: var(--panel-strong);
  border-color: rgba(255, 106, 0, 0.35);
}

/* ─── SERVICE NUMBER ──────────────────────────────────────────────────────────
   Markup: "Orange fonts need to be bigger — same size." Service numbers (01, 02…)
   are orange and should match the eyebrow scale.
   ─────────────────────────────────────────────────────────────────────────── */
.service-number {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--orange-soft);
  /* Increased from 0.82rem to match eyebrow size */
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

/* ─── ABOUT PANEL ─────────────────────────────────────────────────────────────
   Markup: "Perhaps orange font should be same as About KoonX Aero."
   The .eyebrow inside about-panel is covered by the global .eyebrow rule above.
   No additional override needed — consistent with all other eyebrows.
   ─────────────────────────────────────────────────────────────────────────── */
.about-panel {
  margin-top: 4.625rem;
  padding: 42px;
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 106, 0, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.04);
}

.about-panel p {
  font-size: 1.03rem;
}

.contact-section {
  padding: 5.875rem 0;
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 42px;
  align-items: start;
}

.contact-copy p { max-width: 680px; }

.contact-card {
  padding: 30px;
  border: 1px solid rgba(255, 106, 0, 0.28);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: var(--shadow);
}

.contact-card a {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  word-break: break-word;
}

.contact-card a:hover { color: var(--orange-soft); }
.contact-card hr {
  margin: 10px 0 20px;
  border: 0;
  border-top: 1px solid var(--line);
}
.contact-card p { margin-bottom: 0; }

.site-footer {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto 28px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer p { margin-bottom: 0; }
.site-footer a { color: var(--ink); }

@media (max-width: 920px) {
  .hero, .split, .about-panel, .contact-section { grid-template-columns: 1fr; }
  .hero { padding-top: 4.125rem; min-height: auto; }
  .section-intro { position: static; }
  h1 { font-size: 2.75rem; }
  h2 { font-size: 1.875rem; }
}

@media (max-width: 720px) {
  .site-header {
    align-items: flex-start;
    border-radius: 24px;
    flex-direction: column;
    /* Restore tighter padding on mobile */
    padding: 16px 20px;
  }
  .nav { width: 100%; justify-content: space-between; }
  .nav a { padding-inline: 8px; }
  .service-grid, .trust-strip { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .about-panel, .contact-card, .hero-card { padding: 24px; }
  .mark-wrap { min-height: 160px; }
  .site-footer { flex-direction: column; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 2.25rem; }
}

/* ─── DIGITAL NAME CARD (card.html) ───────────────────────────────────────────
   A single centred card that mirrors the hero-card treatment. Reuses existing
   tokens (--panel, --line, --radius-xl, .button, .eyebrow) so it stays in sync
   with the rest of the site if the palette changes.
   ─────────────────────────────────────────────────────────────────────────── */
.namecard-shell {
  /* Larger top padding than the old 3.5rem: card.html has no sticky header, so
     this is the only thing holding the card off the top of the viewport. */
  padding: 5rem 0 4.5rem;
  display: grid;
  place-items: center;
  /* Centre the card vertically when it is shorter than the viewport (large
     desktop), while still allowing normal scroll on phones. */
  min-height: calc(100vh - 9.5rem);
  align-content: center;
}

.namecard {
  width: min(560px, 100%);
  padding: 40px;
  text-align: center;
  border: 1px solid rgba(255, 106, 0, 0.28);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    radial-gradient(circle at 50% 0%, rgba(255, 106, 0, 0.2), transparent 24rem);
  box-shadow: var(--shadow);
}

.namecard-mark {
  display: grid;
  place-items: center;
  width: fit-content;
  margin: 0 auto 28px;
  padding: 18px 40px;
  border-radius: 22px;
  background: var(--brown-850);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.namecard-mark img { width: min(70%, 210px); }

.namecard-identity .eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.75rem;
}

.namecard h1 {
  margin: 0 auto 0.5rem;
  font-size: 2.1rem;
  max-width: none;
}

.namecard-role {
  margin-bottom: 0.75rem;
  color: var(--orange-soft);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.namecard-tagline {
  margin: 0 auto;
  max-width: 400px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.namecard-details {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  text-align: left;
}

.namecard-details li {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.052);
}

.namecard-details span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.namecard-details a {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
  word-break: break-word;
  transition: color 180ms ease;
}

.namecard-details a:hover,
.namecard-details a:focus-visible { color: var(--orange-soft); outline: none; }

.namecard-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.namecard-actions .button {
  flex: 1 1 150px;
  font-family: inherit;
  cursor: pointer;
}

.namecard-qr {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.namecard-qr img {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 16px;
  background: var(--ink);
}

.namecard-qr p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.namecard-uen {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  .namecard { padding: 26px 22px; }
  .namecard h1 { font-size: 1.9rem; }
  .namecard-actions .button { flex: 1 1 100%; width: auto; }
}

/* Printing the card yields a clean, ink-light physical hand-out. */
@media print {
  .site-header, .site-footer, .namecard-actions { display: none !important; }
  body { background: #fff; color: #170903; }
  .namecard { border-color: #cbb9a8; box-shadow: none; background: #fff; }
  .namecard-details a, .namecard h1 { color: #170903; }
  .namecard-mark { background: #170903; }
}