/* Asyda — static site styles
   Most styling is inline (1:1 with the design source).
   This file holds: base resets, keyframes, nav dropdown, and hover states. */

:root { --signal: #FF6B1A; --anim: running; }

html { scroll-behavior: smooth; }
body { margin: 0; background: #16181C; font-family: 'Inter', sans-serif; --signal: #FF6B1A; --anim: running; }
a { text-decoration: none; color: inherit; }
a:hover { color: #E8E6E1; }

@keyframes flow { to { stroke-dashoffset: -16; } }
@keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes buildup { 0%, 15% { opacity: 0; transform: translateY(6px); } 30%, 80% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; transform: translateY(6px); } }

/* Services nav dropdown */
.nav-dropdown { display: none; }
.nav-services:hover .nav-dropdown,
.nav-services.open .nav-dropdown { display: block; }

/* Hover states (generated from the design source) */
.hv-1:hover { color:#E8E6E1; }
.hv-2:hover { background:#262A31; color:#E8E6E1; }
.hv-3:hover { opacity:0.88; }
.hv-4:hover { border-color:rgba(255,255,255,0.4); }
.hv-5:hover { transform:translateY(-4px); border-color:var(--signal); }
.hv-6:hover { border-color:var(--signal); }

/* Contact form fields */
.field-label { display:block; font-size:13px; font-weight:600; color:#8A8F98; margin-bottom:8px; }
.field { width:100%; box-sizing:border-box; background:#16181C; border:1px solid #2C3038; border-radius:8px; padding:12px 14px; font-family:'Inter', sans-serif; font-size:14px; color:#E8E6E1; outline:none; transition:border-color 0.2s ease; }
.field::placeholder { color:#5B6068; }
.field:focus { border-color:var(--signal); }
textarea.field { resize:vertical; }
.required-mark { color:#FF6B6B; }

/* Contact form validation states */
.field.field-invalid { border-color:#FF6B6B; }
.field-error { display:none; margin:6px 0 0; font-size:12.5px; color:#FF6B6B; }
.field-error.visible { display:block; }

/* Contact form submit feedback (aria-live banner) */
.form-feedback { display:none; margin:0 0 20px; padding:12px 14px; border-radius:8px; font-size:13.5px; line-height:1.5; }
.form-feedback--success { display:block; background:rgba(76,175,110,0.12); border:1px solid rgba(76,175,110,0.35); color:#8FE3AC; }
.form-feedback--error { display:block; background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.35); color:#FF9C9C; }

/* Submit button loading spinner */
button[disabled] { opacity:0.7; cursor:not-allowed; }
.spinner { display:inline-block; width:13px; height:13px; margin-left:8px; vertical-align:middle; border:2px solid rgba(22,24,28,0.35); border-top-color:#16181C; border-radius:50%; animation:spin 0.6s linear infinite; }
.spinner[hidden] { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Success panel shown after a successful submission */
.form-success { text-align:left; }

/* Contact page layout grids (collapse to one column on narrow viewports) */
.contact-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:start; }
.form-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 640px) {
  .contact-grid { grid-template-columns:1fr; }
  .form-row-2col { grid-template-columns:1fr; }
}

/* ============================================================
   Responsive layout — breakpoints: tablet <=1024px, mobile <=640px
   ============================================================ */

/* --- Section padding tiers (desktop values match the design source) --- */
.pad-nav { padding:22px 48px; }
.pad-hero { padding:80px 48px 40px; }
.pad-pipeline { padding:24px 48px 90px; }
.pad-stats { padding:40px 48px; }
.pad-96 { padding:96px 48px; }
.pad-88 { padding:88px 48px; }
.pad-100 { padding:100px 48px; }
.pad-footer { padding:36px 48px; }
.pad-contact-hero { padding:64px 48px 8px; }
.pad-form-section { padding:64px 48px 96px; }
.pad-service-hero { padding:72px 48px 72px; }

@media (max-width:1024px) {
  .pad-hero { padding:64px 32px 32px; }
  .pad-pipeline { padding:16px 32px 64px; }
  .pad-stats { padding:32px 32px; }
  .pad-96 { padding:72px 32px; }
  .pad-88 { padding:64px 32px; }
  .pad-100 { padding:72px 32px; }
  .pad-contact-hero { padding:48px 32px 8px; }
  .pad-form-section { padding:48px 32px 72px; }
  .pad-service-hero { padding:48px 32px 48px; }
}
@media (max-width:640px) {
  .pad-nav { padding:16px 20px; }
  .pad-hero { padding:48px 20px 28px; }
  .pad-pipeline { padding:12px 20px 40px; }
  .pad-stats { padding:24px 20px; }
  .pad-96 { padding:56px 20px; }
  .pad-88 { padding:48px 20px; }
  .pad-100 { padding:56px 20px; }
  .pad-footer { padding:24px 20px; }
  .pad-contact-hero { padding:32px 20px 4px; }
  .pad-form-section { padding:32px 20px 56px; }
  .pad-service-hero { padding:32px 20px 32px; }
}

/* --- Type scale (headings shrink at each breakpoint) --- */
.h1-hero { font-size:68px; letter-spacing:-1.5px; }
.h1-service { font-size:54px; letter-spacing:-1px; }
.h1-contact { font-size:46px; letter-spacing:-1px; }
.h3-section-xl { font-size:38px; }
.h3-section-lg { font-size:34px; }
.h3-section-md { font-size:28px; }
.h3-closing { font-size:40px; }
.stat-figure { font-size:36px; }
.stat-figure-sm { font-size:22px; }

@media (max-width:1024px) {
  .h1-hero { font-size:48px; letter-spacing:-1px; }
  .h1-service { font-size:40px; letter-spacing:-0.5px; }
  .h1-contact { font-size:36px; letter-spacing:-0.5px; }
  .h3-section-xl { font-size:30px; }
  .h3-section-lg { font-size:28px; }
  .h3-section-md { font-size:24px; }
  .h3-closing { font-size:32px; }
  .stat-figure { font-size:28px; }
  .stat-figure-sm { font-size:19px; }
}
@media (max-width:640px) {
  .h1-hero { font-size:32px; letter-spacing:-0.3px; }
  .h1-service { font-size:28px; letter-spacing:-0.3px; }
  .h1-contact { font-size:26px; letter-spacing:-0.3px; }
  .h3-section-xl { font-size:23px; }
  .h3-section-lg { font-size:21px; }
  .h3-section-md { font-size:19px; }
  .h3-closing { font-size:24px; }
  .stat-figure { font-size:22px; }
  .stat-figure-sm { font-size:17px; }
}

/* --- CTA button rows (stack full-width on mobile) --- */
.cta-row { display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:640px) {
  .cta-row { flex-direction:column; align-items:stretch; }
  .cta-row a { justify-content:center; }
}

/* --- Footer --- */
.footer-row { display:flex; justify-content:space-between; align-items:center; }
@media (max-width:640px) {
  .footer-row { flex-direction:column; gap:12px; text-align:center; }
}

/* --- Stats / reassurance strip (3-up with a divider on the middle item) --- */
.grid-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; text-align:center; }
.stat-divider { border-left:1px solid #2C3038; border-right:1px solid #2C3038; }
@media (max-width:1024px) { .grid-stats { gap:24px; } }
@media (max-width:640px) {
  .grid-stats { grid-template-columns:1fr; gap:0; }
  .stat-divider { border-left:none; border-right:none; border-top:1px solid #2C3038; border-bottom:1px solid #2C3038; padding:20px 0; margin:4px 0; }
}

/* --- Wide content grids: 2-up at tablet, 1-up at mobile --- */
.grid-services { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.grid-services .span-half { grid-column:span 3; }
.grid-services .span-third { grid-column:span 2; }
.grid-process { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.grid-steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.grid-why { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.grid-whats-included { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-other-services { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

@media (max-width:1024px) {
  .grid-services, .grid-process, .grid-steps3, .grid-why, .grid-whats-included, .grid-other-services {
    grid-template-columns:1fr 1fr;
  }
  .grid-services .span-half, .grid-services .span-third { grid-column:span 1; }
}
@media (max-width:640px) {
  .grid-services, .grid-process, .grid-steps3, .grid-why, .grid-whats-included, .grid-other-services {
    grid-template-columns:1fr;
  }
}

/* --- 2-up grids that only need to stack at mobile --- */
.split-grid-hero { display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
.results-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px) {
  .split-grid-hero { grid-template-columns:1fr; gap:32px; }
  .results-grid { grid-template-columns:1fr; }
}

/* --- Before/after showcase placeholder tiles --- */
.showcase-tile { height:340px; }
.showcase-walkthrough { height:300px; }
@media (max-width:640px) {
  .showcase-tile { height:220px; }
  .showcase-walkthrough { height:200px; }
}

/* --- Mobile nav (hamburger below tablet breakpoint) --- */
.nav-bar { position:relative; }
.nav-toggle { display:none; background:none; border:none; padding:6px; margin:0; cursor:pointer; }
@media (max-width:1024px) {
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .nav-links {
    display:none !important;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch !important;
    gap:6px !important;
    background:#1F2228;
    border-bottom:1px solid #2C3038;
    border-radius:0 0 10px 10px;
    padding:16px 24px 24px;
    z-index:40;
    box-shadow:0 12px 24px rgba(0,0,0,0.25);
  }
  .nav-links.open { display:flex !important; }
  .nav-links > a, .nav-links > div { width:100%; box-sizing:border-box; }
  .nav-links > a { padding:10px 4px; }
  .nav-links > a:last-child { text-align:center; margin-top:6px; }
  .nav-links .nav-services > a { display:flex !important; width:100%; justify-content:space-between; padding:10px 4px; box-sizing:border-box; }
  .nav-links .nav-dropdown { position:static !important; padding-top:8px !important; }
  .nav-links .nav-dropdown > div { width:100% !important; }
}