/* Theme CSS (derived from original header inline CSS) */
:root {
      --color-bg: #ffffff;
      --color-fg: #0b0b0b;
      --color-fg-muted: #555555;
      --color-border: #0b0b0b;
      --color-accent: #0b0b0b;
      --btn-primary-bg: #0b0b0b;
      --btn-primary-fg: #ffffff;
      --maxw: 52rem;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Roboto, system-ui, -apple-system, Segoe UI, Tahoma, Helvetica, Arial, sans-serif;
      background: var(--color-bg);
      color: var(--color-fg);
      display: grid; place-items: center; min-height: 100vh;
    }
    .wrap { width: min(100% - 2rem, var(--maxw)); text-align: center; }

    .hello {
      display: inline-flex;
      gap: clamp(0.25rem, 1vw, 0.6rem);
      letter-spacing: 0.3em;
      font-weight: 700;
      font-size: clamp(1.75rem, 5vw, 3rem);
      line-height: 1;
      user-select: none;
      margin-bottom: 3rem;
      color: var(--color-fg);
    }
    .hello span { opacity: 0; display:inline-block; }

    @keyframes animate-one { 0%{opacity:0;transform:translate(1500px,1000px);} 70%{opacity:0;} 100%{transform:translate(0,0);opacity:1;} }
    @keyframes animate-two { 0%{opacity:0;transform:translate(-100px,1050px);} 70%{opacity:0;} 100%{transform:translate(0,0);opacity:1;} }
    @keyframes animate-three { 0%{opacity:0;transform:translate(0,-1000px);} 70%{opacity:0;} 100%{transform:translate(0,0);opacity:1;} }
    @keyframes animate-four { 0%{opacity:0;transform:translate(-1500px,1000px);} 70%{opacity:0;} 100%{transform:translate(0,0);opacity:1;} }
    @keyframes animate-five { 0%{opacity:0;} 70%{opacity:0;} 100%{opacity:1;} }
    @keyframes animate-con { 0%{opacity:0;} 33%{opacity:0;} 100%{opacity:1;} }
    @keyframes fade-in { 0%{opacity:0;} 100%{opacity:1;} }

    .hello span:nth-child(1){ animation:animate-one 1.2s ease-out forwards; }
    .hello span:nth-child(2){ animation:animate-two 1.2s ease-out forwards; }
    .hello span:nth-child(3){ animation:animate-three 1.2s ease-out forwards; }
    .hello span:nth-child(4){ animation:animate-four 1.2s ease-out forwards; }
    .hello span:nth-child(5){ animation:animate-five 1.2s ease-out forwards; }

    .subtitle {
      margin: 0 0 2rem;
      font-size: clamp(1.1rem, 2.8vw, 1.35rem);
      letter-spacing: 0.3em;
      color: var(--color-fg);
      opacity: 0;
      animation: animate-con 600ms ease-out 1.6s forwards;
      line-height: 1.8;
    }

    .actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }

    .btn {
      --scale: 1;
      appearance:none;
      border:1.5px solid var(--color-border);
      background: transparent;
      color: var(--color-fg);
      padding:.7rem 1.25rem;
      border-radius:999px;
      font-weight:700;
      letter-spacing:.1em;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      opacity:0; 
      transform: scale(var(--scale));
      box-shadow:0 2px 6px rgba(0,0,0,0.10);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
      will-change: transform;
      cursor: pointer;
    }
    .btn.primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }

    #primaryBtn   { animation: fade-in 800ms ease-out 2.25s forwards; }
    #secondaryBtn { animation: fade-in 800ms ease-out 2.55s forwards; }

    .btn:hover  { --scale: 1.05; box-shadow:0 6px 16px rgba(0,0,0,0.15); filter: contrast(1.06); }
    .btn:active { --scale: 0.97; box-shadow:0 3px 8px rgba(0,0,0,0.12); }

    .btn:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }

    .social {
      margin-top: 1.5rem;
      display:flex;
      gap:1rem;
      justify-content:center;
      opacity:0;
      animation: animate-con 500ms ease-out 3s forwards;
    }
    .social-link {
      --scale: 1;
      color: var(--color-fg);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px; height:40px;
      border:1.5px solid var(--color-border);
      border-radius:50%;
      text-decoration:none;
      transform: scale(var(--scale));
      box-shadow:0 2px 6px rgba(0,0,0,0.10);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      will-change: transform;
      cursor: pointer;
    }
    .social-link:hover  { --scale: 1.08; box-shadow:0 6px 16px rgba(0,0,0,0.15); filter: contrast(1.06); }
    .social-link:active { --scale: 0.95; box-shadow:0 3px 8px rgba(0,0,0,0.12); }

    #estimateTitle {margin: 2.5rem 0; text-align:center;}
    .actions {margin: 2.5rem 0;}


    footer {
      margin-top:2rem;
      font-size:.95rem;
      color: var(--color-fg-muted);
      opacity:0;
      animation:animate-con 500ms ease-out 3.4s forwards;
    }

    .form-card {
      width: min(100%, 48rem);
      margin: 0.5rem auto 0;
      text-align: left;
      border:1.5px solid var(--color-border);
      border-radius: 20px;
      padding: 1rem;
      box-shadow:0 2px 6px rgba(0,0,0,0.10);
      opacity:0; animation: fade-in 400ms ease-out 2.2s forwards;
    }
    .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1rem; }
    .grid .full { grid-column: 1 / -1; }
    label { font-size:.85rem; font-weight:700; letter-spacing:.06em; }
    input, textarea, select {
      width: 100%;
      padding: .7rem .8rem;
      border:1.5px solid var(--color-border);
      border-radius: 12px;
      font: inherit;
    }
    textarea { min-height: 140px; resize: vertical; }
    .form-head {display:flex; align-items:center; justify-content:space-between; margin-bottom: .5rem;}
    .form-title {font-size: clamp(1.1rem, 2.2vw, 1.25rem); letter-spacing:.12em; font-weight:700;}
    .required {color:#b00020; margin-left:.25rem;}
    .hint {display:none; font-size:.8rem; color: #6b7280; margin-top:.35rem;}
    .field {display:flex; flex-direction:column;}
    .notice { margin: .75rem auto 0; color: #0b0b0b; font-weight: 500; text-align:center; }
    .error { color: #b00020; }
    .success { color: #0a7a2f; }

    @media (prefers-reduced-motion: reduce) {
      .hello span, .btn, .subtitle, footer, .social, .form-card { animation:none; opacity:1; transform:none; }
    }

/* --- WP + Estimate page overrides (v14.6) --- */
body.page-template-page-estimate .hello,
body.page-template-page-estimate #helloWord { display:none !important; }

/* On Estimate page, remove long intro animations (show immediately) */
body.page-template-page-estimate .btn,
body.page-template-page-estimate .subtitle,
body.page-template-page-estimate footer,
body.page-template-page-estimate .social,
body.page-template-page-estimate .form-card {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Ensure actions row is visible on estimate form */
body.page-template-page-estimate .estimate-actions {
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:center;
  margin-top: 14px;
}

body.page-template-page-estimate .estimate-actions .btn {
  opacity: 1 !important;
}

/* Keep admin bar from pushing things weirdly */
body.admin-bar .wrap { padding-top: 0; }



/* v15.2 — Estimate page: keep layout but remove long animations */
body.page-template-page-estimate footer,
body.page-template-page-estimate .form-card,
body.page-template-page-estimate .subtitle,
body.page-template-page-estimate .actions,
body.page-template-page-estimate .social {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}