/* =====================================================================
   ULISES — Landing page
   ===================================================================== */

/* ---------- Top bar ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(244,236,219,.92), rgba(244,236,219,.72));
  border-bottom:1px solid var(--line-soft);
}
.nav__row{ display:flex; align-items:center; gap:1.5rem; padding:.85rem 0; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--roman); font-weight:800;
  letter-spacing:.24em; font-size:1.05rem; }
.brand .mark{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--gold); }
.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{ font-family:var(--roman); font-weight:500; letter-spacing:.12em; font-size:.72rem;
  text-transform:uppercase; color:var(--ink-soft); transition:color .2s; }
.nav__links a:hover{ color:var(--wine); }
.nav__cta{ margin-left:.4rem; }
@media (max-width:900px){ .nav__links{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(4rem,9vw,8rem) 0 clamp(3rem,6vw,5rem);
  background:
    linear-gradient(180deg, rgba(244,236,219,.88), rgba(244,236,219,.78) 55%, rgba(244,236,219,.92)),
    url("images/hero-navigator.png") center 28% / cover no-repeat,
    radial-gradient(1000px 520px at 72% 12%, rgba(29,85,102,.16), transparent 62%);
}
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero__title{
  font-size:clamp(3.6rem,9vw,7.4rem); letter-spacing:.06em;
  margin:.4rem 0 .2rem; line-height:.98;
  background:linear-gradient(180deg,var(--ink),var(--wine-deep) 140%);
  -webkit-background-clip:text; background-clip:text;
}
.hero__motto{
  font-family:var(--deco); font-weight:700; color:var(--bronze);
  font-size:clamp(1.4rem,3.2vw,2.1rem); letter-spacing:.02em; font-style:italic;
  margin:.2rem 0 1.3rem;
}
.hero__motto::before,.hero__motto::after{ content:"“"; color:var(--gold); opacity:.5; }
.hero__motto::after{ content:"”"; }
.hero__lead{ font-size:1.22rem; max-width:34ch; color:var(--ink-soft); }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.7rem; }
.hero__meta{ margin-top:2.2rem; display:flex; gap:2rem; flex-wrap:wrap; }
.hero__meta div{ font-family:var(--roman); }
.hero__meta b{ display:block; font-size:1.5rem; color:var(--wine); }
.hero__meta span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }

/* Hero medallion / art frame */
.hero__art{ position:relative; }
.medallion{
  aspect-ratio:1/1; border-radius:50%;
  border:2px solid var(--gold);
  box-shadow:var(--shadow-lift), inset 0 0 0 12px rgba(244,236,219,.06);
  overflow:hidden; position:relative;
  background:var(--parchment);
}
.medallion img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (max-width:860px){ .hero__grid{ grid-template-columns:1fr; } .hero__art{ order:-1; max-width:360px; margin-inline:auto; } }

/* ---------- Section heading ---------- */
.head{ max-width:720px; margin-bottom:2.6rem; }
.head--center{ margin-inline:auto; text-align:center; }
.head h2{ font-size:clamp(2rem,4.6vw,3.1rem); margin:.5rem 0 .6rem; }
.head p{ font-size:1.16rem; color:var(--ink-soft); }

/* ---------- Concept transform ---------- */
.transform{ display:grid; grid-template-columns:1fr auto 1.6fr; gap:1.6rem; align-items:center; }
.transform__in{ padding:1.6rem 1.8rem; }
.transform__in .q{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--ink); }
.transform__arrow{ font-size:2rem; color:var(--gold); text-align:center; }
.steps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.step{
  padding:.7rem .9rem; background:var(--parchment); border:1px solid var(--line-soft);
  border-radius:var(--radius); font-family:var(--roman); font-size:.74rem; letter-spacing:.06em;
  display:flex; align-items:center; gap:.55rem;
}
.step b{ font-size:.7rem; color:var(--gold); font-weight:700; }
@media (max-width:820px){ .transform{ grid-template-columns:1fr; } .transform__arrow{ transform:rotate(90deg); } }

/* ---------- Faculties grid ---------- */
.grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid{ grid-template-columns:1fr; } }
.faculty{ padding:1.5rem 1.5rem 1.6rem; }
.faculty .ico{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 35%, var(--gold-pale), var(--bronze));
  color:#2b1a08; font-size:1.35rem; margin-bottom:.9rem; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.faculty h3{ font-size:1.02rem; letter-spacing:.08em; margin-bottom:.4rem; }
.faculty p{ font-size:1rem; color:var(--ink-soft); margin:0; }

/* ---------- Route engine ---------- */
.route{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.route__map{ padding:.6rem; overflow:hidden; }
.route__map img{ width:100%; height:auto; border-radius:var(--radius); }
@media (max-width:860px){ .route{ grid-template-columns:1fr; } }

/* ---------- Pantheon of agents ---------- */
.pantheon{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .pantheon{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pantheon{ grid-template-columns:1fr; } }
.god{ padding:1.15rem 1.15rem 1.5rem; text-align:center; }
.god .bust{
  width:100%; aspect-ratio:1; margin:0 auto .95rem;
  border-radius:var(--radius); object-fit:cover; object-position:center top;
  display:block;
  border:1px solid var(--gold);
  box-shadow:var(--shadow-soft);
  background:var(--parchment);
}
.god h3{ font-size:1rem; letter-spacing:.14em; }
.god .role{ font-family:var(--serif); font-style:italic; color:var(--wine); font-size:1.05rem; }
.god p{ font-size:.95rem; color:var(--ink-soft); margin:.5rem 0 0; }

/* ---------- Architecture diagram ---------- */
.arch{ padding:.6rem; overflow:hidden; }
.arch img{ width:100%; height:auto; border-radius:var(--radius); }

/* ---------- Philosophy ---------- */
.philo{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 400px at 85% 20%, rgba(185,138,62,.14), transparent 60%),
    linear-gradient(180deg,var(--aegean-deep),var(--wine-black));
  color:var(--marble);
}
.philo .wrap{ position:relative; z-index:2; }
.philo h2{ color:var(--marble-lit); }
.philo .eyebrow{ color:var(--gold-pale); }
.philo p{ color:rgba(244,236,219,.85); font-size:1.2rem; }
.philo .divider span{ color:var(--gold-pale); }
.philo::before{ /* faint columns */
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, transparent 0 60px, rgba(231,206,147,.5) 60px 62px);
  mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}

/* ---------- Pairing (Hermes + Ulises) ---------- */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:720px){ .pair{ grid-template-columns:1fr; } }
.pair__card{ padding:1.5rem 1.5rem 1.9rem; }
.pair__card .portrait{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line); margin-bottom:1rem;
  box-shadow:var(--shadow-soft);
}
.pair__card h3{ margin:.2rem 0 .2rem; font-size:1.35rem; letter-spacing:.16em; }
.pair__card .tag{ font-family:var(--serif); font-style:italic; color:var(--wine); font-size:1.1rem; }

/* ---------- Final CTA ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(2.2rem,5.5vw,3.6rem); }
.cta-final .btn{ margin-top:1.4rem; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line-soft); padding:2.4rem 0 3rem; }
.foot__row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.foot small{ color:var(--ink-faint); font-family:var(--roman); letter-spacing:.1em; font-size:.7rem; }