/* ============================================================
   Sprezza — Art Deco layer (marketing site only)
   Cloisonné gold linework · jewel tones · stepped geometry
   Loaded after styles.css on index/software/consulting/about/contact.
   ============================================================ */

:root {
  --gold:       #c08a3e;
  --gold-hi:    #e3b564;
  --gold-deep:  #a87434;
  --oxblood:    #9c3f2e;
  --oxblood-dp: #7e3225;
  --navy:       #232c43;
  --navy-deep:  #1b2237;
  --sage:       #7c8f58;
  --cream:      #f6eed9;
  --blush:      #e3bca6;
  --display: "Poiret One", "Cormorant Garamond", serif;
  --dsans:   "Josefin Sans", "Inter", sans-serif;
}

/* ---------- Gilded page frame (the tile's gold mat) ---------- */
body::before {
  content: ""; position: fixed; inset: 10px; z-index: 90; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  outline-offset: 3px;
}
@media (max-width: 760px) { body::before { display: none; } }

/* ---------- Typography: deco display ---------- */
h1, h2, .display { font-family: var(--display); font-weight: 400; letter-spacing: 0.015em; line-height: 1.12; }
.display { font-size: clamp(2.5rem, 6.4vw, 4.9rem); }
.hero .display, .hero--split .display { max-width: 20ch; }
.stat .num { font-family: var(--display); }
.eyebrow, .kicker { font-family: var(--dsans); letter-spacing: 0.26em; font-size: 0.78rem; }
.brand {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 1.12rem; font-weight: 400;
}
.nav__links a { font-family: var(--dsans); text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.16em; }

/* ---------- Nav: tricolor crest stripe (tile border stripes) ---------- */
.nav { border-bottom: 0; }
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--sage) 0 2px, transparent 2px 3px,
      var(--gold) 3px 4px, transparent 4px 5px,
      var(--navy) 5px 7px);
  opacity: 0.75;
}
.nav.scrolled { border-bottom: 0; }

/* ---------- Buttons: chamfered ticket corners, double keyline ---------- */
.btn {
  border-radius: 0;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                     calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  font-family: var(--dsans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
}
.btn::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  border: 1px solid rgba(246,238,217,0.4);
}
.btn--accent { background: var(--oxblood); border-color: var(--oxblood); }
.btn--accent:hover { background: var(--oxblood-dp); border-color: var(--oxblood-dp); }
.btn--solid { background: var(--navy); border-color: var(--navy); }
.btn--solid:hover { background: var(--oxblood-dp); border-color: var(--oxblood-dp); }
.btn--ghost { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--ink); }
.btn--ghost::before { border-color: color-mix(in srgb, var(--gold) 26%, transparent); }
.btn--ghost:hover { border-color: var(--gold-deep); color: var(--oxblood-dp); background: rgba(192,138,62,0.08); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold-deep); }
.nav__links a.nav__cta {
  border-radius: 0; background: var(--navy); border-color: var(--navy);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.nav__links a.nav__cta:hover, .nav__links a.nav__cta.active { background: var(--oxblood); border-color: var(--oxblood); }

/* ---------- Eyebrow motif: rule into a diamond ---------- */
.eyebrow::before {
  width: 27px; height: 8px; background: currentColor; opacity: 0.9; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 8'%3E%3Crect x='0' y='3.4' width='13' height='1.3'/%3E%3Cpath d='M20 1 L23 4 L20 7 L17 4 Z'/%3E%3C/svg%3E") left center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 8'%3E%3Crect x='0' y='3.4' width='13' height='1.3'/%3E%3Cpath d='M20 1 L23 4 L20 7 L17 4 Z'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* ---------- Deco separators & dividers ---------- */
.deco-rule {
  width: 152px; height: 22px; margin: 0 auto; color: var(--gold);
  background: currentColor; opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 152 22'%3E%3Cpath d='M76 4 L84 11 L76 18 L68 11 Z'/%3E%3Crect x='35' y='10.2' width='27' height='1.6'/%3E%3Crect x='90' y='10.2' width='27' height='1.6'/%3E%3Cpath d='M28 8 L31 11 L28 14 L25 11 Z'/%3E%3Cpath d='M124 8 L127 11 L124 14 L121 11 Z'/%3E%3Crect x='16' y='8' width='2.4' height='6'/%3E%3Crect x='133.6' y='8' width='2.4' height='6'/%3E%3Crect x='10' y='9.2' width='2.4' height='3.6'/%3E%3Crect x='139.6' y='9.2' width='2.4' height='3.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 152 22'%3E%3Cpath d='M76 4 L84 11 L76 18 L68 11 Z'/%3E%3Crect x='35' y='10.2' width='27' height='1.6'/%3E%3Crect x='90' y='10.2' width='27' height='1.6'/%3E%3Cpath d='M28 8 L31 11 L28 14 L25 11 Z'/%3E%3Cpath d='M124 8 L127 11 L124 14 L121 11 Z'/%3E%3Crect x='16' y='8' width='2.4' height='6'/%3E%3Crect x='133.6' y='8' width='2.4' height='6'/%3E%3Crect x='10' y='9.2' width='2.4' height='3.6'/%3E%3Crect x='139.6' y='9.2' width='2.4' height='3.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.deco-sep { margin-block: clamp(1.5rem, 4vw, 3rem); }
.divider {
  height: 1px; border: 0; overflow: visible; position: relative;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.divider::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--paper); border: 1px solid var(--gold);
}

/* ---------- Artwork: gold hairline mat + sunburst medallion ---------- */
.art { box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--gold) 38%, transparent); border-radius: 12px; }
.hero__art { isolation: isolate; }
.hero__art::before {
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(192,138,62,0.14) 0 4deg, transparent 4deg 11deg);
  -webkit-mask: radial-gradient(closest-side, #000 36%, transparent 74%);
          mask: radial-gradient(closest-side, #000 36%, transparent 74%);
}
.hero__art .art { position: relative; z-index: 1; }
.deco-star {
  position: absolute; z-index: 2; width: 18px; aspect-ratio: 1; pointer-events: none;
  background: var(--gold); opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.7 6 14 9.3 20 10 C14 10.7 10.7 14 10 20 C9.3 14 6 10.7 0 10 C6 9.3 9.3 6 10 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.7 6 14 9.3 20 10 C14 10.7 10.7 14 10 20 C9.3 14 6 10.7 0 10 C6 9.3 9.3 6 10 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Hero backdrop: warm rays instead of blobs ---------- */
.hero::before {
  border-radius: 0;
  background: repeating-conic-gradient(from 148deg at 86% -4%, rgba(192,138,62,0.09) 0 3deg, transparent 3deg 10deg);
  -webkit-mask: radial-gradient(closest-side at 86% 0%, #000 30%, transparent 78%);
          mask: radial-gradient(closest-side at 86% 0%, #000 30%, transparent 78%);
}
.hero::after { background: radial-gradient(circle, rgba(227,188,166,0.28), transparent 62%); }

/* ---------- Cards: chamfered plaques with gold mats ---------- */
.pillar {
  border-radius: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease), border-color 0.5s ease;
}
.pillar::before { background: linear-gradient(90deg, var(--oxblood), var(--gold-hi), var(--sage)); }
.pillar::after {
  content: ""; position: absolute; inset: 6px; border-radius: 0; pointer-events: none;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                     calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  opacity: 0.8; transition: opacity 0.5s var(--ease), border-color 0.5s ease;
}
.pillar:hover { box-shadow: none; filter: drop-shadow(0 20px 24px rgba(26,24,20,0.16)); }
.pillar:hover::after { opacity: 1; border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
.section--dark .pillar::after { border-color: rgba(227,181,100,0.16); }

/* ---------- Icon chips, indexes & steps: gilded plaques ---------- */
.ico {
  border-radius: 0; background: var(--cream); color: var(--oxblood);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px),
                     calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent);
}
.ico--teal { background: var(--cream); color: var(--teal-deep); }
.slist__row .idx, .step__n {
  border-radius: 0; border: 0; box-shadow: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: var(--gold-hi); color: var(--navy); font-weight: 600;
  width: 2.9rem; height: 2.9rem; font-size: 1rem;
}
.step__n { width: 3.2rem; height: 3.2rem; font-size: 1.15rem; }
.slist--teal .slist__row .idx { background: var(--sage); color: var(--cream); }
.section--dark .step__n { background: var(--gold-hi); color: var(--navy); }

/* ---------- Night sections: rays, starfield & skyline ---------- */
.section--dark {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 80% 0%, #2a3350 0%, var(--navy-deep) 62%);
  padding-bottom: calc(clamp(4rem, 9vw, 8rem) + 44px);
}
.section--dark > .wrap { position: relative; z-index: 1; }
.section--dark .eyebrow { color: var(--gold-hi); }
.section--dark .serif-accent { color: var(--gold-hi); }
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% -6%, rgba(227,181,100,0.06) 0 3deg, transparent 3deg 9deg);
  -webkit-mask: linear-gradient(180deg, #000, transparent 68%);
          mask: linear-gradient(180deg, #000, transparent 68%);
}
.section--dark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.7 6 14 9.3 20 10 C14 10.7 10.7 14 10 20 C9.3 14 6 10.7 0 10 C6 9.3 9.3 6 10 0 Z' fill='%23e3b564'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.7 6 14 9.3 20 10 C14 10.7 10.7 14 10 20 C9.3 14 6 10.7 0 10 C6 9.3 9.3 6 10 0 Z' fill='%23e3b564'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.7 6 14 9.3 20 10 C14 10.7 10.7 14 10 20 C9.3 14 6 10.7 0 10 C6 9.3 9.3 6 10 0 Z' fill='%23e3b564'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64'%3E%3Cpath d='M0 64 V38 H18 V26 H42 V44 H70 V16 H80 V10 H84 V16 H104 V48 H132 V30 H150 V22 H166 V40 H196 V18 H210 V34 H240 V64 Z' fill='%23273150'/%3E%3Cg fill='%23e3b564' opacity='0.75'%3E%3Crect x='24' y='32' width='4' height='5'/%3E%3Crect x='88' y='22' width='4' height='5'/%3E%3Crect x='140' y='36' width='4' height='5'/%3E%3Crect x='200' y='26' width='4' height='5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  background-position: 8% 24%, 85% 14%, 64% 52%, left bottom;
  background-size: 17px, 12px, 21px, 240px 64px;
  opacity: 0.85;
}

/* ---------- CTA band: gilded night marquee ---------- */
.cta-band {
  border-radius: 0;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
                     calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  background: radial-gradient(120% 160% at 50% -20%, #2b3452 0%, var(--navy-deep) 65%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 42%, transparent);
}
.cta-band::before {
  background:
    radial-gradient(40% 60% at 15% 20%, rgba(156,63,46,0.35), transparent 60%),
    radial-gradient(40% 60% at 85% 90%, rgba(124,143,88,0.30), transparent 60%);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% -8%, rgba(227,181,100,0.08) 0 3deg, transparent 3deg 9deg);
  -webkit-mask: linear-gradient(180deg, #000, transparent 58%);
          mask: linear-gradient(180deg, #000, transparent 58%);
}
.cta-band .btn--solid { background: var(--oxblood); border-color: var(--oxblood); box-shadow: none; }
.cta-band .btn--solid:hover { background: var(--oxblood-dp); border-color: var(--oxblood-dp); }

/* ---------- Footer: the night skyline ---------- */
.footer {
  position: relative; margin-top: 52px; border-top: 0;
  background: var(--navy-deep); color: #c9c2b2;
}
.footer::before {
  content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 52px; pointer-events: none;
  background: var(--navy-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64 V38 H18 V26 H42 V44 H70 V16 H80 V10 H84 V16 H104 V48 H132 V30 H150 V22 H166 V40 H196 V18 H210 V34 H240 V64 Z'/%3E%3C/svg%3E") left bottom / 240px 52px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64 V38 H18 V26 H42 V44 H70 V16 H80 V10 H84 V16 H104 V48 H132 V30 H150 V22 H166 V40 H196 V18 H210 V34 H240 V64 Z'/%3E%3C/svg%3E") left bottom / 240px 52px repeat-x;
}
.footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.7 6 14 9.3 20 10 C14 10.7 10.7 14 10 20 C9.3 14 6 10.7 0 10 C6 9.3 9.3 6 10 0 Z' fill='%23e3b564'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.7 6 14 9.3 20 10 C14 10.7 10.7 14 10 20 C9.3 14 6 10.7 0 10 C6 9.3 9.3 6 10 0 Z' fill='%23e3b564'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 91% 18%, 76% 62%; background-size: 15px, 10px;
}
.footer > .wrap { position: relative; z-index: 1; }
.footer .brand { color: var(--cream); }
.footer .brand .dot { color: var(--gold-hi); }
.footer .brand .mark { background: var(--cream); border-radius: 50%; padding: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.footer__brand p { color: #a7a294; }
.footer h4 { color: var(--gold-hi); font-family: var(--dsans); letter-spacing: 0.22em; }
.footer__col a { color: #c9c2b2; }
.footer__col a:hover { color: var(--gold-hi); }
.footer__bottom { border-top: 1px solid rgba(227,181,100,0.22); color: #8d94ab; }
.footer .muted { color: #8d94ab; }

/* ---------- Forms & FAQ accents ---------- */
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(192,138,62,0.16);
}
.faq summary::after { color: var(--gold-deep); }
.form-success { border-left-color: var(--gold-deep); }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .nav__links a { font-size: 0.8rem; }
}