/* ================= ROOT ================= */
:root {
  --navy:#0F1E3C;
  --navy-mid:#1A2F54;
  --navy-lt:#243B68;
  --teal:#3EADA0;
  --teal-lt:#5DC4B8;
  --teal-pale:#E8F7F5;
  --gold:#C4952A;
  --gold-lt:#D9B05A;
  --gold-pale:#FBF4E6;
  --cream:#F8F6F1;
  --white:#FFFFFF;
  --slate:#2C3A52;
  --muted:#6B7A90;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'DM Sans', system-ui, sans-serif;

  --max-w:1220px;
  --nav-h:78px;
}

/* ================= BASE ================= */
.ytf-wrap * {
  box-sizing:border-box;
}

.ytf-wrap {
  font-family:var(--sans);
  color:var(--slate);
}

.ytf-wrap img {
  max-width:100%;
  display:block;
}

.ytf-wrap a {
  text-decoration:none;
  color:inherit;
}

.wrap {
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
}

/* ================= HERO ================= */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy);
}

.hero__bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(62,173,160,0.12), transparent 60%),
    radial-gradient(ellipse 50% 80% at 15% 80%, rgba(196,149,42,0.08), transparent 50%),
    linear-gradient(135deg,#0F1E3C,#1A2F54,#0F1E3C);
}

.hero__grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:60px 60px;
}

.hero__accent-line {
  position:absolute;
  right:20%;
  width:1px;
  height:100%;
  background:linear-gradient(to bottom, transparent, rgba(196,149,42,0.4), transparent);
}

.hero__inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.hero__title {
  font-family:var(--serif);
  font-size:clamp(2.8rem,5vw,5rem);
  color:#fff;
}

.hero__sub {
  color:rgba(255,255,255,0.65);
  max-width:50ch;
}

.hero__actions {
  margin-top:20px;
  display:flex;
  gap:1rem;
}

/* ================= BUTTONS ================= */
.btn {
  padding:0.85rem 2rem;
  font-size:0.82rem;
  text-transform:uppercase;
  cursor:pointer;
}

.btn--gold {
  background:var(--gold);
  color:var(--navy);
}

.btn--outline {
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
}

/* ================= SERVICES ================= */
.services {
  padding:6rem 0;
  background:var(--cream);
}

.services__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

.service-card {
  background:#fff;
  padding:2rem;
  border:1px solid rgba(0,0,0,0.06);
  transition:0.3s;
}

.service-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,0.08);
}

.service-card__title {
  font-family:var(--serif);
  color:var(--navy);
}

.service-card__body {
  color:var(--muted);
}

/* ================= FRAMEWORK ================= */
.framework {
  background:var(--navy);
  padding:6rem 0;
}

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

.pillar {
  padding:2rem;
  background:rgba(255,255,255,0.03);
}

.pillar__title {
  color:#fff;
}

/* ================= ABOUT ================= */
.about {
  padding:6rem 0;
}

.cred-item {
  display:flex;
  gap:1rem;
  padding:1rem;
  background:var(--cream);
  border-left:3px solid var(--gold);
}

/* ================= AUTHORITY ================= */
.authority {
  padding:6rem 0;
}

.auth-card {
  display:flex;
  gap:1rem;
  padding:1.5rem;
  border:1px solid rgba(0,0,0,0.07);
  margin-bottom:1rem;
}

.auth-card:hover {
  border-color:var(--teal);
}

/* ================= CTA ================= */
.cta-band {
  padding:5rem 0;
  background:linear-gradient(135deg,var(--teal),#2A8A80);
  text-align:center;
  color:#fff;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr;}
  .services__grid{grid-template-columns:1fr;}
  .framework__pillars{grid-template-columns:1fr;}
}