/* ============================================================
   GOLDENEYE - ESTIMATE PAGE STYLES
   ============================================================ */

.estimate{background:var(--paper);padding:clamp(56px,8vw,96px) var(--gutter-x)}
.estimate-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px,6vw,88px);align-items:start}
@media(max-width:960px){.estimate-inner{grid-template-columns:1fr}}

/* Left column - contact info */
.contact-col h2{font-family:var(--sans);font-weight:900;font-size:clamp(32px,4vw,44px);line-height:1.05;letter-spacing:-0.025em;margin-bottom:20px}
.contact-col h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--red)}
.contact-col > p{font-size:16px;color:var(--muted);line-height:1.65;margin-bottom:32px;max-width:440px}

.contact-blocks{display:grid;gap:0}
.contact-block{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.contact-block:last-child{border-bottom:1px solid var(--line)}
.contact-icon{width:42px;height:42px;flex-shrink:0;background:var(--red);color:var(--paper);display:flex;align-items:center;justify-content:center}
.contact-icon svg{width:18px;height:18px}
.contact-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.contact-value{font-size:16px;font-weight:500;color:var(--ink)}
.contact-value a{color:var(--ink);transition:color 0.2s}
.contact-value a:hover{color:var(--red)}

/* Form card with corner accent
   --------------------------------
   The accent is a sibling that paints first; .form-card paints after
   in source order, so the card's black background naturally covers the
   portion of the square that overlaps the card body. Only the L-shaped
   12px strip sticking out at the top-left corner remains visible.
   This avoids the ::before { z-index: -1 } trick, which fails here
   because .form-card-wrap establishes its own stacking context via
   the fade-up transform. */
.form-card-wrap{position:relative}
.form-card-accent{
  position:absolute;
  top:-12px;left:-12px;
  width:70px;height:70px;
  background:var(--red);
  pointer-events:none;
}
.form-card{
  background:var(--ink);color:var(--paper);
  padding:clamp(32px,4vw,48px);
  position:relative;
}
.form-title{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.form-sub{font-family:var(--serif);font-size:28px;font-weight:400;letter-spacing:-0.015em;margin-bottom:32px;line-height:1.1;color:var(--paper)}
.form-sub em{font-style:italic;color:var(--red)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-field{position:relative}
.form-field.full{grid-column:1 / -1}
.form-field label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.78);margin-bottom:8px;display:block}
.form-field label .label-optional{opacity:0.5;font-weight:400;text-transform:none;letter-spacing:0}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;border:0;border-bottom:1.5px solid rgba(255,255,255,0.25);
  padding:10px 0;font-size:15px;font-family:var(--sans);color:var(--paper);
  background:transparent;transition:border-color 0.2s;outline:none;font-weight:500;
}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(255,255,255,0.35)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-bottom-color:var(--red)}
.form-field textarea{min-height:90px;resize:vertical;line-height:1.55}
.form-field select{appearance:none;-webkit-appearance:none;cursor:pointer;color:var(--paper);background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50%;background-size:4px 4px;background-repeat:no-repeat;padding-right:24px}
.form-field select option{color:var(--ink);background:var(--paper)}

.form-submit{
  grid-column:1 / -1;margin-top:16px;
  background:var(--red);color:var(--paper);
  padding:20px 32px;font-weight:800;font-size:13px;letter-spacing:1.4px;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;
  justify-content:center;width:100%;
  transition:background 0.2s,transform 0.2s;position:relative;
}
.form-submit::after{content:'';position:absolute;inset:0;border:2px solid var(--paper);transform:translate(5px,5px);transition:transform 0.2s;z-index:-1}
.form-submit:hover{background:var(--paper);color:var(--red)}
.form-submit:hover::after{transform:translate(7px,7px);border-color:var(--red)}
.form-submit svg{width:14px;height:14px;transition:transform 0.2s}
.form-submit:hover svg{transform:translateX(4px)}
.form-note{grid-column:1 / -1;font-size:12px;color:rgba(255,255,255,0.55);margin-top:4px;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.form-note svg{width:14px;height:14px;color:var(--red);flex-shrink:0;margin-top:2px}

/* ---- AJAX submit states -------------------------------------- */

/* Disabled / loading button */
.form-submit:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
}
.form-submit:disabled::after{transform:translate(5px,5px) !important}

/* Inline error banner shown above the form fields when submission fails */
.form-error{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:rgba(220,30,46,0.10);
  border-left:3px solid var(--red);
  color:var(--paper);
  font-size:14px;
  line-height:1.5;
  margin-bottom:8px;
}
.form-error svg{
  width:20px;height:20px;
  color:var(--red);
  flex-shrink:0;
  margin-top:1px;
}

/* Success state — replaces the form contents inside the card */
.form-success{display:none;outline:none}

.form-card.is-success > .form-title,
.form-card.is-success > .form-sub,
.form-card.is-success > form{display:none}

.form-card.is-success > .form-success{display:block;animation:form-success-in 0.4s ease both}

@keyframes form-success-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.form-success-icon{
  width:60px;height:60px;
  border-radius:50%;
  background:var(--red);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;
}
.form-success-icon svg{width:28px;height:28px}

.form-success-title{
  font-family:var(--serif);font-weight:400;font-style:normal;
  font-size:clamp(28px,3vw,36px);
  line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--paper);
  margin-bottom:14px;
}

.form-success-msg{
  font-size:15.5px;line-height:1.65;
  color:rgba(255,255,255,0.72);
  max-width:440px;
  margin-bottom:32px;
}

.form-success-reset{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  border:0;background:transparent;
  border-bottom:2px solid var(--red);
  padding:8px 0;
  cursor:pointer;
  transition:color 0.2s,border-color 0.2s;
}
.form-success-reset:hover{color:var(--red)}
.form-success-reset svg{
  width:14px;height:14px;
  transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.form-success-reset:hover svg{transform:rotate(-90deg)}

/* ---- Form tabs (Contact vs Request Estimate) ---------------- */

.form-tabs{
  display:flex;
  gap:8px;
  margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.form-tab{
  flex:1;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.85);
  padding:12px 16px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  cursor:pointer;
  transition:color 0.2s,border-color 0.2s,background 0.2s;
}

.form-tab:hover{
  color:var(--paper);
  border-color:rgba(220,30,46,0.55);
  background:rgba(220,30,46,0.10);
}

.form-tab.is-active{
  background:var(--red);
  border-color:var(--red);
  color:var(--paper);
}

.form-tab.is-active:hover{
  background:var(--red);
  border-color:var(--red);
}

@media(max-width:520px){
  .form-tabs{gap:6px}
  .form-tab{padding:11px 10px;font-size:10.5px;letter-spacing:1.3px}
}

/* Pane visibility: only the active pane renders. The [hidden]
   attribute is also applied via JS for screen readers. */
.form-pane{display:none}
.form-pane.is-active{display:block}

/* When the card is in success state, hide tabs + panes too */
.form-card.is-success > .form-tabs{display:none}

/* ---- Honeypot field ----------------------------------------- */
/* Hidden from real users, visible to form-scraping bots that
   parse HTML and try to fill all inputs. Server-side check
   rejects any submission where this field is non-empty. */
.form-hp{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}