/* ==========================================
   Ironclad Tech - Extended Design System
   New components: icon visuals, forms, legal,
   careers, breadcrumbs, service detail pages
   ========================================== */

/* ---- Icon Hero Visual (replaces missing photography) ---- */
.icon-visual{
    position:relative;
    width:100%;
    max-width:420px;
    aspect-ratio:1/1;
    margin:0 auto;
    border-radius:50%;
    background:linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lg);
}
.icon-visual::before{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px dashed rgba(212,175,55,.45);
    animation:spin 40s linear infinite;
}
.icon-visual i{
    font-size:clamp(64px,10vw,110px);
    color:var(--gold);
    z-index:2;
}
.icon-visual .float-badge{
    position:absolute;
    background:#fff;
    color:var(--primary);
    border-radius:14px;
    padding:12px 18px;
    box-shadow:var(--shadow-md);
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    z-index:3;
}
.icon-visual .float-badge i{ font-size:18px; color:var(--gold-dark); }
.icon-visual .badge-top{ top:6%; right:-4%; }
.icon-visual .badge-bottom{ bottom:8%; left:-6%; }

@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* ---- Illustration wrap (custom SVG art on hero sections) ---- */
.illustration-wrap{
    position:relative;
    max-width:420px;
    margin:0 auto;
}
.detail-illustration{
    width:100%;
    display:block;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
.illustration-wrap .float-badge{
    position:absolute;
    background:#fff;
    color:var(--primary);
    border-radius:14px;
    padding:12px 18px;
    box-shadow:var(--shadow-md);
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    z-index:3;
}
.illustration-wrap .float-badge i{ font-size:18px; color:var(--gold-dark); }
.illustration-wrap .badge-top{ top:2%; right:-2%; }
.illustration-wrap .badge-bottom{ bottom:4%; left:-4%; }

/* ---- Real logo (uploaded) sizing ---- */
.navbar-logo-img{
    height: 48px;
    width: auto;
    border-radius: 8px;
}
.footer-brand-mark{ margin-bottom: 14px; }
.footer-logo-img{
    height: 56px;
    width: auto;
    border-radius: 8px;
}

/* Smaller inline icon block used inside cards/rows */
.icon-block{
    width:88px;
    height:88px;
    border-radius:22px;
    background:linear-gradient(145deg, var(--primary) 0%, var(--primary-light) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
}
.icon-block i{ font-size:36px; color:var(--gold); }

/* ---- Breadcrumb / Page Hero (shared by detail + utility pages) ---- */
.detail-hero{
    background:linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 100%);
    color:#fff;
    padding:110px 0 80px;
}
.detail-hero .eyebrow{
    display:inline-block;
    background:rgba(212,175,55,.15);
    color:var(--gold-light);
    border:1px solid rgba(212,175,55,.4);
    padding:6px 16px;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:18px;
}
.detail-hero h1{ font-weight:700; margin-bottom:18px; }
.detail-hero p{ color:rgba(255,255,255,.85); font-size:18px; max-width:560px; }
.breadcrumb-trail{ font-size:14px; color:rgba(255,255,255,.65); margin-bottom:16px; }
.breadcrumb-trail a{ color:rgba(255,255,255,.85); text-decoration:none; }
.breadcrumb-trail a:hover{ color:var(--gold-light); }

/* ---- Checklist used in detail pages ---- */
.check-list{ list-style:none; padding:0; margin:26px 0; }
.check-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:9px 0;
    font-size:16px;
    color:var(--dark);
}
.check-list li i{ color:var(--gold-dark); margin-top:4px; }

/* ---- Benefit / feature grid card ---- */
.benefit-card{
    background:#fff;
    border-radius:var(--radius);
    padding:32px 28px;
    height:100%;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
    border-top:3px solid transparent;
}
.benefit-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-top-color:var(--gold);
}
.benefit-card.stacked{ height:auto; }
.benefit-card i{ font-size:30px; color:var(--primary); margin-bottom:16px; }
.benefit-card h5{ font-weight:700; color:var(--primary-dark); margin-bottom:10px; }
.benefit-card p{ color:var(--gray); margin:0; font-size:15px; }

/* ---- Forms (Contact / Quote) ---- */
.form-panel{
    background:#fff;
    border-radius:var(--radius);
    padding:44px;
    box-shadow:var(--shadow-md);
}
.form-panel h3{ color:var(--primary-dark); font-weight:700; margin-bottom:8px; }
.form-panel .form-sub{ color:var(--gray); margin-bottom:28px; }
.form-panel label{ font-weight:600; color:var(--dark); font-size:14px; margin-bottom:6px; }
.form-panel .form-control,
.form-panel .form-select{
    border:1px solid #E2E8F0;
    border-radius:10px;
    padding:12px 14px;
    font-size:15px;
    margin-bottom:18px;
}
.form-panel .form-control:focus,
.form-panel .form-select:focus{
    border-color:var(--primary-light);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.form-note{ font-size:13px; color:var(--gray); margin-top:14px; }
.form-status{ display:none; padding:14px 16px; border-radius:10px; margin-bottom:18px; font-size:14px; }
.form-status.success{ display:block; background:#DCFCE7; color:#166534; }
.form-status.error{ display:block; background:#FEE2E2; color:#991B1B; }

.contact-info-card{
    background:#fff;
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow-sm);
    display:flex;
    gap:18px;
    align-items:flex-start;
    margin-bottom:20px;
}
.contact-info-card i{
    width:52px; height:52px; min-width:52px;
    border-radius:14px;
    background:var(--light);
    color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
}
.contact-info-card > div{ min-width:0; }
.contact-info-card h5{ font-weight:700; color:var(--primary-dark); margin-bottom:4px; }
.contact-info-card p{ margin:0; color:var(--gray); overflow-wrap:break-word; }
.contact-info-card a{ color:var(--gray); text-decoration:none; }
.contact-info-card a:hover{ color:var(--primary); }

.map-frame{
    width:100%;
    height:320px;
    border:0;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}

/* ---- Full-width map banner (upper section on Contact page) ---- */
.map-banner-section{
    width:100%;
    line-height:0;
}
.map-frame-full{
    width:100%;
    height:380px;
    border:0;
    display:block;
    filter: grayscale(.15) contrast(1.05);
}

/* ---- Legal pages ---- */
.legal-content{ padding:70px 0 90px; }
.legal-content h2{ color:var(--primary-dark); font-weight:700; margin-top:40px; margin-bottom:14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ color:#374151; line-height:1.8; }
.legal-content .updated{ color:var(--gray); font-size:14px; margin-bottom:30px; }

/* ---- Careers ---- */
.job-card{
    background:#fff;
    border-radius:var(--radius);
    padding:26px 30px;
    box-shadow:var(--shadow-sm);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:18px;
    transition:var(--transition);
}
.job-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.job-card h5{ font-weight:700; color:var(--primary-dark); margin-bottom:6px; }
.job-card .job-meta{ color:var(--gray); font-size:14px; }
.job-card .job-meta i{ color:var(--gold-dark); margin-right:5px; }
.culture-card{ text-align:center; padding:26px 16px; }
.culture-card i{ font-size:34px; color:var(--gold-dark); margin-bottom:14px; }

/* ---- 404 ---- */
.error-page{
    min-height:70vh;
    display:flex;
    align-items:center;
    text-align:center;
    background:var(--light);
}
.error-page h1{ font-size:clamp(80px,18vw,160px); color:var(--primary); font-weight:700; line-height:1; }
.error-page h2{ color:var(--primary-dark); margin-bottom:14px; }
.error-page p{ color:var(--gray); margin-bottom:30px; }

/* ---- Scroll-reveal utility (paired with animations.js) ---- */
.fade-in-up{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fade-in-up.in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
    .fade-in-up{ opacity:1; transform:none; transition:none; }
    .icon-visual::before{ animation:none; }
}