/* ==========================================================================
   CIVADOS — homepage layout
   Every rule is scoped beneath `.cvd-home` so nothing here can reach the
   service pages, About, FAQ or Contact.
   Depends on civados-system.css for tokens and primitives.
   ========================================================================== */

.cvd-home {
  --cvd-section-y: clamp(3.5rem, 6.5vw, 6.5rem);
}

.cvd-home section { position: relative; }

/* Section fields */
.cvd-home .cvd-field--parchment { background: var(--cvd-parchment); }
.cvd-home .cvd-field--soft      { background: var(--cvd-parchment-soft); }
.cvd-home .cvd-field--navy      { background: var(--cvd-navy); }

.cvd-home .cvd-section { padding: var(--cvd-section-y) 0; }
.cvd-home .cvd-section--tight { padding: clamp(2rem, 3vw, 2.75rem) 0; }

/* Shared two-column section head: heading left, supporting copy right */
.cvd-home .cvd-sechead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.cvd-home .cvd-sechead h2 { max-width: 20ch; }
.cvd-home .cvd-sechead__aside { max-width: 46ch; }

@media (max-width: 900px) {
  .cvd-home .cvd-sechead { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cvd-home .cvd-sechead h2 { max-width: none; }
}

/* ==========================================================================
   1. HERO — Living Square at Blue Hour
   The artwork is a real <picture>, absolutely positioned inside a hero whose
   height is set in CSS, so the mobile/desktop ratio change cannot shift layout.
   ========================================================================== */
.cvd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cvd-navy-deep);
  min-height: 660px;
  display: flex;
  align-items: flex-end;
}
.cvd-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cvd-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Scrim: strong at the left where the copy sits and along the bottom edge;
   clear across the tower and the fountain on the right. */
.cvd-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(16, 25, 40, .93) 0%,
      rgba(16, 25, 40, .89) 26%,
      rgba(17, 27, 44, .62) 46%,
      rgba(20, 31, 48, .22) 66%,
      rgba(20, 31, 48, 0) 82%),
    linear-gradient(to top,
      rgba(14, 22, 36, .88) 0%,
      rgba(15, 24, 38, .46) 22%,
      rgba(16, 26, 42, .10) 46%,
      rgba(16, 26, 42, 0) 62%);
}

.cvd-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(2.75rem, 5vw, 4.25rem);
}
.cvd-hero__copy { max-width: 34rem; }
.cvd-hero .cvd-eyebrow { color: var(--cvd-gold); }
.cvd-hero h1 { color: var(--cvd-parchment); max-width: 15ch; }
.cvd-hero__rule { margin: 1.5rem 0 1.35rem; }
.cvd-hero__lede {
  color: rgba(253, 249, 237, .88);
  max-width: 44ch;
  margin: 0;
}
.cvd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .cvd-hero { min-height: clamp(660px, 50vw, 780px); }
  .cvd-hero__art img { object-position: 50% 26%; }
}
@media (max-width: 767px) {
  /* 74px header + 760px hero = 834px, so the primary CTA lands inside the
     390 x 844 opening viewport while the portrait art still gets a clear band
     at the top for the tower and sky. */
  .cvd-hero { min-height: 760px; align-items: flex-end; }
  /* Anchor the portrait art to the bottom and let it run taller than the hero.
     That trims empty sky off the top so the tower, arcade and fountain rise
     into the clear band above the copy instead of being squeezed into it. */
  .cvd-hero__art { top: auto; bottom: 0; height: 122%; }
  .cvd-hero__art img { object-position: 58% 50%; }
  .cvd-hero__scrim {
    background:
      linear-gradient(to top,
        rgba(14, 22, 36, .95) 0%,
        rgba(14, 22, 36, .93) 52%,
        rgba(15, 24, 38, .82) 68%,
        rgba(16, 25, 40, .44) 84%,
        rgba(16, 26, 42, .12) 100%);
  }
  .cvd-hero__inner { padding: 3rem 0 2.25rem; }
  .cvd-hero h1 { max-width: none; }
  .cvd-hero__lede { max-width: none; font-size: 1rem; }
  .cvd-hero__actions { flex-direction: column; align-items: stretch; gap: .7rem; }
  .cvd-hero__actions .cvd-btn { width: 100%; }
}

/* ==========================================================================
   2. POSITIONING STRIP — four qualitative facts, thin rules, no boxes
   ========================================================================== */
.cvd-strip { border-bottom: 1px solid var(--cvd-rule); }
.cvd-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}
.cvd-strip__item {
  padding: 0 clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid var(--cvd-rule);
}
.cvd-strip__item:first-child { border-left: 0; padding-left: 0; }
.cvd-strip__item:last-child { padding-right: 0; }
.cvd-strip dt {
  font-family: var(--cvd-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cvd-gold-ink);
  margin-bottom: .55rem;
}
.cvd-strip dd {
  margin: 0;
  font-family: var(--cvd-serif);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--cvd-ink);
}

@media (max-width: 900px) {
  .cvd-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0; }
  .cvd-strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cvd-strip__item:nth-child(even) { padding-right: 0; }
}
@media (max-width: 540px) {
  .cvd-strip__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cvd-strip__item,
  .cvd-strip__item:first-child {
    border-left: 0;
    border-top: 1px solid var(--cvd-rule-soft);
    padding: 1.05rem 0;
  }
  .cvd-strip__item:first-child { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   3. MISSED-CALL CALCULATOR
   ========================================================================== */
.cvd-calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cvd-calc__intro { max-width: 44ch; }
.cvd-calc__disclosure {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cvd-rule);
  font-size: .88rem;
  line-height: 1.65;
  color: var(--cvd-ink-quiet);
}

.cvd-calc__panel {
  background: var(--cvd-parchment);
  border: 1px solid var(--cvd-rule);
  border-top: 2px solid var(--cvd-navy);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.cvd-calc__fields {
  display: grid;
  /* An implicit `auto` track would size to the number input's min-content and
     push the panel past a 320px viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  margin: 0;
  border: 0;
  padding: 0;
  min-inline-size: 0;
}
.cvd-calc__legend {
  font-family: var(--cvd-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cvd-ink-quiet);
  padding: 0;
  margin-bottom: 1.35rem;
}
.cvd-field label {
  display: block;
  font-family: var(--cvd-mono);
  font-size: .655rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cvd-navy);
  margin-bottom: .5rem;
}
.cvd-field__hint {
  display: block;
  font-family: var(--cvd-serif);
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cvd-ink-quiet);
  margin-top: .2rem;
}
.cvd-field__wrap { position: relative; display: flex; align-items: stretch; }
.cvd-field__affix {
  display: flex;
  align-items: center;
  padding: 0 .85rem;
  border: 1px solid var(--cvd-rule);
  border-right: 0;
  background: var(--cvd-parchment-soft);
  font-family: var(--cvd-mono);
  font-size: .8rem;
  color: var(--cvd-ink-quiet);
}
.cvd-field__affix--suffix { border: 1px solid var(--cvd-rule); border-left: 0; }
.cvd-field input {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: .7rem .9rem;
  font-family: var(--cvd-mono);
  font-size: 1rem;
  color: var(--cvd-navy);
  background: #FFFDF7;
  border: 1px solid var(--cvd-rule);
  border-radius: 0;
}
.cvd-field input::placeholder { color: rgba(28, 41, 58, .5); }
.cvd-field input:focus-visible { border-color: var(--cvd-navy); }
.cvd-field input[aria-invalid="true"] { border-color: #8C2F1E; background: #FFF6F2; }

.cvd-field__error {
  display: none;
  margin-top: .5rem;
  font-family: var(--cvd-serif);
  font-size: .92rem;
  line-height: 1.5;
  color: #8C2F1E;
}
.cvd-field__error::before { content: "\2715\00a0\00a0"; font-family: var(--cvd-mono); font-size: .75em; }
.cvd-field__error[data-visible="true"] { display: block; }

.cvd-calc__result {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem;
  background: var(--cvd-navy);
  color: var(--cvd-on-navy);
}
.cvd-calc__result .cvd-label { color: var(--cvd-on-navy-quiet); margin-bottom: .6rem; }
.cvd-calc__value {
  font-family: var(--cvd-serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--cvd-parchment);
}
/* Guidance states are sentences, not figures — they must not use the display size. */
.cvd-calc__value[data-state="empty"],
.cvd-calc__value[data-state="invalid"] {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--cvd-on-navy);
  font-weight: 400;
}
.cvd-calc__result-note {
  margin: .7rem 0 0;
  font-family: var(--cvd-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cvd-on-navy-quiet);
}
.cvd-calc__cta { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .cvd-calc__grid { grid-template-columns: minmax(0, 1fr); }
  .cvd-calc__intro { max-width: none; }
}

/* ==========================================================================
   4. OPERATIONAL REALITY — dark field, four leakage points
   ========================================================================== */
.cvd-reality .cvd-answer {
  font-family: var(--cvd-serif);
  font-style: italic;
  font-size: clamp(1.45rem, .95rem + 1.6vw, 2.1rem);
  line-height: 1.32;
  color: var(--cvd-gold);
  margin: 1rem 0 0;
}
.cvd-reality__head { padding-bottom: 2.25rem; border-bottom: 1px solid var(--cvd-rule-on-navy); }
.cvd-leaks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.75rem;
}
.cvd-leak {
  padding: 0 clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid var(--cvd-rule-on-navy);
}
.cvd-leak:first-child { border-left: 0; padding-left: 0; }
.cvd-leak:last-child { padding-right: 0; }
.cvd-leak h3 { color: var(--cvd-parchment); margin-bottom: .7rem; }
.cvd-leak p { font-size: .98rem; line-height: 1.7; margin: 0; }

@media (max-width: 1000px) {
  .cvd-leaks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 0; }
  .cvd-leak:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cvd-leak:nth-child(even) { padding-right: 0; }
}
@media (max-width: 600px) {
  .cvd-leaks { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2rem; }
  .cvd-leak,
  .cvd-leak:first-child {
    border-left: 0;
    border-top: 1px solid var(--cvd-rule-on-navy);
    padding: 1.5rem 0;
  }
}

/* ==========================================================================
   5. OPERATING MODULES — restrained arcade
   A single thin arch drawn per module. No image, no bay, no repeated hero.
   ========================================================================== */
.cvd-modules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.cvd-module {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid var(--cvd-rule);
}
.cvd-module:first-child { border-left: 0; padding-left: 0; }
.cvd-module:last-child { padding-right: 0; }
/* One thin arch per module. The arcade is a framing motif, not the content:
   no bay, no repeated hero image, no boxed card. */
.cvd-module__arch {
  display: block;
  width: 100%;
  /* Capped so the flush-edge first and last columns do not draw wider arches
     than the padded middle columns. */
  max-width: 212px;
  height: auto;
  color: var(--cvd-gold);
  margin-bottom: 1.5rem;
}
.cvd-module__index {
  font-family: var(--cvd-mono);
  font-size: .6rem;
  letter-spacing: .24em;
  color: var(--cvd-gold-ink);
  display: block;
  margin-bottom: .5rem;
}
.cvd-module h3 { margin-bottom: .65rem; }
.cvd-module p { font-size: .98rem; line-height: 1.7; margin-bottom: 1.25rem; }
.cvd-module__link { margin-top: auto; align-self: flex-start; }

@media (max-width: 1000px) {
  .cvd-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 0; }
  .cvd-module:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cvd-module:nth-child(even) { padding-right: 0; }
}
@media (max-width: 600px) {
  .cvd-modules { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cvd-module,
  .cvd-module:first-child {
    border-left: 0;
    border-top: 1px solid var(--cvd-rule);
    padding: 1.75rem 0;
  }
  .cvd-module:first-child { border-top: 0; padding-top: 0; }
  .cvd-module__arch { max-width: 160px; }
}

/* ==========================================================================
   6. HOW IT WORKS — four steps
   ========================================================================== */
.cvd-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.cvd-step {
  padding: 1.5rem clamp(1rem, 2.2vw, 2rem) 0;
  border-top: 1px solid var(--cvd-navy);
  border-left: 1px solid var(--cvd-rule);
}
.cvd-step:first-child { border-left: 0; padding-left: 0; }
.cvd-step:last-child { padding-right: 0; }
.cvd-step__n {
  display: block;
  font-family: var(--cvd-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--cvd-gold-ink);
  margin-bottom: .9rem;
}
.cvd-step h3 { margin-bottom: .6rem; }
.cvd-step p { font-size: .98rem; line-height: 1.7; margin: 0; }

@media (max-width: 1000px) {
  .cvd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 0; }
  .cvd-step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cvd-step:nth-child(even) { padding-right: 0; }
}
@media (max-width: 600px) {
  .cvd-steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem 0; }
  .cvd-step,
  .cvd-step:first-child { border-left: 0; padding: 1.25rem 0 0; }
}

/* ==========================================================================
   7. INDUSTRIES AND FIT
   ========================================================================== */
.cvd-fit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cvd-fit__body { max-width: 48ch; }
.cvd-fit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
.cvd-fit__list li {
  font-family: var(--cvd-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28, 41, 58, .8);
  padding: .7rem 0;
  border-bottom: 1px solid var(--cvd-rule-soft);
  break-inside: avoid;
}
@media (max-width: 900px) {
  .cvd-fit__grid { grid-template-columns: minmax(0, 1fr); }
  .cvd-fit__body { max-width: none; }
}
@media (max-width: 460px) {
  .cvd-fit__list { columns: 1; }
}

/* ==========================================================================
   8. PRACTICAL AUTOMATION — editorial pull statement
   ========================================================================== */
.cvd-human__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 2px solid var(--cvd-gold);
}
.cvd-human h2 { max-width: 22ch; }
.cvd-human__body { max-width: 46ch; }
@media (max-width: 900px) {
  .cvd-human__grid { grid-template-columns: minmax(0, 1fr); }
  .cvd-human h2 { max-width: none; }
}

/* ==========================================================================
   9. FAQ — static, crawlable, no hidden content
   ========================================================================== */
.cvd-faq__list { margin-top: clamp(2rem, 3.5vw, 3rem); }
.cvd-faq__item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--cvd-rule);
}
.cvd-faq__item:last-child { border-bottom: 1px solid var(--cvd-rule); }
.cvd-faq__item h3 { max-width: 26ch; }
.cvd-faq__item p { margin: 0; }
.cvd-faq__more { margin-top: 2rem; }

@media (max-width: 820px) {
  .cvd-faq__item { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}

/* ==========================================================================
   10. FINAL CTA
   ========================================================================== */
/* Mirrors the two-column section head used everywhere above, so the closing
   band resolves the page's rhythm instead of trailing off to the left. */
.cvd-final { border-top: 1px solid var(--cvd-navy); }
.cvd-final__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
}
.cvd-final h2 { max-width: 18ch; }
.cvd-final__body { margin: 0; max-width: 46ch; }
.cvd-final__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 900px) {
  .cvd-final__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cvd-final h2 { max-width: none; }
  .cvd-final__body { max-width: none; }
}
@media (max-width: 540px) {
  .cvd-final__actions .cvd-btn { width: 100%; }
}