/* =========================================================
   Cirrus Guanli AMS — Clean CSS (Replace Entire File)
   Fonts:
   - Display: Questrial (400)
   - Body: Work Sans ExtraLight (200)
   ========================================================= */

/* ---------- Theme + Layout Variables ---------- */
:root{
  /* Colors (match screenshot vibe) */
  --topbar: #2a0f45;              /* deep purple header bar */
  --ink: #2a0f45;                 /* headline/subtitle ink color */
  --kicker: rgba(255,255,255,.85);
  --copy: rgba(255,255,255,.78);

  /* Page layout */
  --max: 1200px;
  --topbar-h: 92px;

  /* Hero content placement (tweak if needed) */
  --hero-pad-x: 64px;
  --hero-pad-top: 78px;

  /* Font size caps (your screenshot is the MAX) */
  --h1-max: 72px;
  --sub-max: 28px;
  --kicker-max: 18px;
  --copy-max: 16px;

  /* Minimums for small screens */
  --h1-min: 40px;
  --sub-min: 18px;
  --kicker-min: 15px;
  --copy-min: 14px;
}

/* ---------- Base / Reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: #ffffff;
  color: #111;
  /* Helps the ExtraLight look cleaner */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Header Bar ---------- */
.topbar{
  height: var(--topbar-h);
  background: var(--topbar);
}

.topbar__inner{
  max-width: var(--max);
  height: 100%;
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
}

.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo{
  height: clamp(40px, 3.2vw, 56px); /* logo bigger, responsive */
  width: auto;
  display: block;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: calc(100vh - var(--topbar-h));
  overflow: hidden;
  background: #e9eef3; /* fallback */
}

.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right; /* keeps architectural “point” visible */
}

/* Content container */
.hero__inner{
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--hero-pad-top) var(--hero-pad-x) 60px;
}

.hero__content{
  max-width: 640px; /* matches screenshot text block width */
}

/* ---------- Typography Mapping ---------- */
/* Display: Questrial */
.hero h1,
.hero__subtitle,
.hero__kicker{
  font-family: "Questrial", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Narrative: Work Sans ExtraLight */
.hero__copy{
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* H1 (max 72px) */
.hero h1{
  margin: 0;
  font-size: clamp(var(--h1-min), 6vw, var(--h1-max));
  font-weight: 400;              /* Questrial only */
  letter-spacing: -0.02em;
  line-height: 1.05;             /* tight like screenshot */
  color: var(--ink);
}

/* Subtitle (max 28px) */
.hero__subtitle{
  margin: 6px 0 26px;
  font-size: clamp(var(--sub-min), 2.6vw, var(--sub-max));
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--ink);
  opacity: .9;
}

/* Kicker (max 18px) */
.hero__kicker{
  margin: 0 0 10px;
  font-size: clamp(var(--kicker-min), 1.6vw, var(--kicker-max));
  font-weight: 400;
  line-height: 1.25;
  color: var(--kicker);
}

/* Body copy (max 16px, ExtraLight) */
.hero__copy{
  margin: 0;
  font-size: clamp(var(--copy-min), 1.35vw, var(--copy-max));
  font-weight: 200;              /* Work Sans ExtraLight */
  line-height: 1.85;             /* airy like screenshot */
  color: var(--copy);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  max-width: 62ch;               /* similar line length to screenshot */
}

/* ---------- Responsive Tweaks ---------- */
@media (max-width: 900px){
  :root{
    --hero-pad-x: 26px;
    --hero-pad-top: 54px;
  }

  .topbar__inner{ padding: 0 18px; }
}

@media (max-width: 560px){
  :root{
    --topbar-h: 84px;
    --hero-pad-top: 42px;
  }
}

/* ---------- Optional: Ultra-wide stability ---------- */
@media (min-width: 1400px){
  .hero__inner{ padding-top: 78px; }
}