/* Operio marketing site — base styles from the design handoff + the bits the
   static build adds (responsive header, form states, WhatsApp line). Page
   layout itself is inline in each HTML file (high-fidelity export). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #FAFAF7; color: #4D4D4D; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #4D4D4D; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #000; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #4D4D4D; outline-offset: 3px; box-shadow: 0 0 0 6px #F5E60D; }
img { max-width: 100%; display: block; }
input, textarea, button { font: inherit; }

/* hover variants emitted by the prototype runtime */
.hov-ul:hover { text-decoration: underline !important; }
.hov-ink:hover { color: #4D4D4D !important; }
.btn-press:hover { box-shadow: 2px 2px 0 #4D4D4D !important; transform: translate(2px, 2px) !important; }
.hov-surface:hover { background: #F3EFE7 !important; }
.hov-yellow:hover { text-decoration: underline !important; color: #F5E60D !important; }

/* ── Header: hamburger + mobile panel (breakpoint 980px) ─────────────────── */
.hamb { display: none; width: 42px; height: 38px; border: 1.5px solid #4D4D4D; border-radius: 8px; background: #fff; cursor: pointer; place-items: center; padding: 0; }
.hamb > span { display: grid; gap: 4px; }
.hamb > span > span { display: block; width: 18px; height: 2px; background: #4D4D4D; transition: transform .15s, opacity .15s; }
.hamb[aria-expanded="true"] > span > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamb[aria-expanded="true"] > span > span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] > span > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { border-top: 1.5px solid #4D4D4D; padding: 12px clamp(16px, 4vw, 40px) 20px; display: grid; gap: 4px; background: #FAFAF7; }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { padding: 12px 0; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; color: #4D4D4D; border-bottom: 1px solid #E3DCCF; }
.mobile-nav a.mn-login { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 16px; text-transform: none; letter-spacing: 0; }
.mobile-nav a.mn-cta { margin-top: 12px; padding: 14px 16px; text-align: center; background: #F5E60D; border: 2px solid #4D4D4D; border-radius: 8px; font-size: 17px; }
@media (max-width: 979px) {
  .hdr-nav, .hdr-login, .hdr-cta { display: none !important; }
  .hamb { display: grid; }
}
@media (min-width: 980px) { .mobile-nav { display: none !important; } }

/* ── Contact form states ─────────────────────────────────────────────────── */
#contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#contact-form [aria-invalid="true"] { border-color: #A3261B !important; }
#contact-form .f-err { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #A3261B; }
#contact-form .f-fail { margin: 0; padding: 12px 14px; border: 1.5px solid #A3261B; background: #FBEDEB; border-radius: 8px; font-size: 14px; font-weight: 600; color: #A3261B; }
#contact-form button[type="submit"][disabled] { opacity: .7; cursor: progress; }
.contact-ok { background: #FAFAF7; border-radius: 10px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; justify-items: start; color: #4D4D4D; }
.contact-ok[hidden] { display: none; }
.contact-ok .ok-mark { width: 52px; height: 52px; display: grid; place-items: center; background: #F5E60D; border: 2px solid #4D4D4D; border-radius: 10px; font-weight: 800; font-size: 24px; }
.contact-ok h3 { margin: 0; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: 1.05; }
.contact-ok p { margin: 0; font-size: 16px; line-height: 1.55; color: #3D3A35; }
.btn-outline { padding: 14px 20px; background: #fff; border: 2px solid #4D4D4D; border-radius: 10px; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: #4D4D4D; cursor: pointer; }
.btn-outline:hover { background: #F3EFE7; }

/* WhatsApp line under the phone number (contact, dark background) */
.wa-hint { display: block; margin-top: 4px; font-size: 14px; color: #BDB8AE; }
.wa-hint a { color: #EDEAE3; }

/* ── FAQ (details/summary) ───────────────────────────────────────────────── */
#faq summary::-webkit-details-marker { display: none; }
#faq details[open] summary span[aria-hidden] { transform: rotate(45deg); }
#faq summary span[aria-hidden] { transition: transform .15s; }
#faq details[open] summary { border-bottom: 1px solid #E3DCCF; margin-bottom: 14px; }

/* ── Feature rows stack under 980px (the prototype did this in JS) ───────── */
@media (max-width: 979px) {
  .feat-row { flex-direction: column !important; align-items: stretch !important; }
  .feat-row > * { flex: none !important; width: 100%; }
}