/* =====================================================================
   LooseMap — About Us + Contact Us
   Self-contained; uses :root tokens from layouts/app.blade.php
   ===================================================================== */

/* ---------- Shared hero ---------- */
.pg-hero {
    color: #fff; padding: 4rem 0 3.5rem;
    background: linear-gradient(180deg, rgba(10,15,20,.6), rgba(10,15,20,.88)), var(--pg-hero-img, none) center/cover no-repeat, var(--eh-ink);
}
.pg-crumbs { font-size: .8rem; opacity: .8; margin-bottom: 1rem; }
.pg-crumbs a { color: #fff; text-decoration: none; }
.pg-crumbs a:hover { color: var(--eh-gold); }
.pg-crumbs span { margin: 0 .4rem; opacity: .6; }
.pg-eyebrow { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--eh-gold); font-weight: 600; margin-bottom: .4rem; }
.pg-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); font-weight: 800; color: #fff; margin-bottom: .6rem; text-shadow: 0 4px 20px rgba(0,0,0,.35); }
.pg-hero p.lead { font-size: clamp(.98rem, 2vw, 1.2rem); opacity: .9; max-width: 600px; margin: 0; }

.pg-section { padding: 4rem 0; }
.pg-head { margin-bottom: 2rem; }
.pg-head h2 { font-weight: 700; margin-bottom: .35rem; }
.pg-head p { color: #6b7280; margin: 0; max-width: 560px; }
.pg-head.is-center { text-align: center; }
.pg-head.is-center p { margin-left: auto; margin-right: auto; }

/* =====================================================================
   ABOUT
   ===================================================================== */
.ab-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; }
.ab-statement { font-family: 'Playfair Display', serif; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.25; font-weight: 700; margin: 0; }
.ab-statement em { font-style: normal; color: #b07d1a; }
.ab-intro p { color: #3d4652; font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.5rem; }
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ab-stat { background: #fff; border-radius: 16px; padding: 1.1rem 1rem; text-align: center; box-shadow: 0 4px 18px rgba(20,32,43,.07); }
.ab-stat strong { display: block; font-family: 'Playfair Display', serif; font-size: 2rem; line-height: 1; color: var(--eh-ink); }
.ab-stat span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; font-weight: 600; }

/* what we do */
.ab-band { background: #fff; }
.ab-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-pillar {
    position: relative; display: block; text-decoration: none; color: var(--eh-ink);
    background: var(--eh-cream); border: 1px solid rgba(20,32,43,.08); border-radius: 20px; padding: 1.6rem 1.4rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ab-pillar:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(20,32,43,.12); border-color: var(--eh-gold); color: var(--eh-ink); }
.ab-pillar-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--eh-ink); color: var(--eh-gold); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }
.ab-pillar h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.ab-pillar p { font-size: .88rem; color: #5b6572; margin: 0; }
.ab-pillar .bi-arrow-up-right { position: absolute; top: 1.3rem; right: 1.3rem; color: #9aa4b1; transition: transform .25s ease, color .25s ease; }
.ab-pillar:hover .bi-arrow-up-right { transform: translate(3px, -3px); color: var(--eh-gold); }

/* editorial process */
.ab-dark { background: var(--eh-ink); color: #fff; }
.ab-dark .pg-head p { color: #9fb0bf; }
.ab-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
.ab-step { position: relative; padding: 0 1.4rem 0 0; }
.ab-step::before { content: ''; position: absolute; top: 27px; left: 60px; right: 8px; height: 1px; background: rgba(255,255,255,.18); }
.ab-step:last-child::before { display: none; }
.ab-step-no { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--eh-gold); color: var(--eh-gold); display: inline-flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; background: var(--eh-ink); }
.ab-step h3 { font-size: 1.1rem; margin: 0 0 .4rem; color: #fff; }
.ab-step p { font-size: .88rem; color: #aab8c5; margin: 0; }

/* CTA */
.ab-cta { text-align: center; max-width: 680px; margin: 0 auto; }
.ab-cta h2 { font-weight: 700; margin-bottom: .6rem; }
.ab-cta p { color: #5b6572; margin-bottom: 1.5rem; }
.ab-cta .btn { border-radius: 50px; padding: .65rem 1.6rem; font-weight: 600; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.ct-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; align-items: start; }

.ct-info { background: var(--eh-ink); color: #fff; border-radius: 24px; padding: 2rem; position: relative; overflow: hidden; }
.ct-info::after { content: '\F3E8'; font-family: 'bootstrap-icons'; position: absolute; right: -20px; bottom: -40px; font-size: 11rem; line-height: 1; opacity: .06; transform: rotate(-12deg); pointer-events: none; }
.ct-info h2 { font-size: 1.5rem; margin-bottom: .4rem; color: #fff; }
.ct-info > p { color: #aab8c5; font-size: .92rem; margin-bottom: 1.5rem; }
.ct-item { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-top: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.ct-item:hover { color: #fff; }
a.ct-item:hover .ct-item-text strong { color: var(--eh-gold); }
.ct-item-icon { flex: 0 0 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.1); color: var(--eh-gold); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.ct-item-text small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa1b2; font-weight: 600; }
.ct-item-text strong { font-weight: 500; font-size: .95rem; line-height: 1.45; transition: color .2s ease; }
.ct-side-link { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,.07); color: #fff; text-decoration: none; font-size: .9rem; transition: background .2s ease; }
.ct-side-link:hover { background: rgba(217,164,65,.2); color: #fff; }
.ct-side-link i { color: var(--eh-gold); }

.ct-form-card { background: #fff; border-radius: 24px; padding: 2rem; box-shadow: 0 10px 34px rgba(20,32,43,.09); }
.ct-form-card h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.ct-form-card > p { color: #6b7280; font-size: .92rem; margin-bottom: 1.25rem; }

.ct-topics { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.ct-topic { border: 1px solid rgba(20,32,43,.15); background: transparent; color: var(--eh-ink); font-size: .82rem; font-weight: 600; padding: .38rem .95rem; border-radius: 50px; transition: all .2s ease; }
.ct-topic:hover { border-color: var(--eh-gold); }
.ct-topic.is-active { background: var(--eh-ink); border-color: var(--eh-ink); color: #fff; }

.ct-form-card .form-label { font-size: .82rem; font-weight: 600; color: #3d4652; margin-bottom: .3rem; }
.ct-form-card .form-control { border-radius: 12px; border-color: rgba(20,32,43,.15); padding: .7rem .9rem; font-size: .95rem; }
.ct-form-card .form-control:focus { border-color: var(--eh-gold); box-shadow: 0 0 0 .2rem rgba(217,164,65,.22); }
.ct-count { text-align: right; font-size: .75rem; color: #8a94a3; margin-top: .25rem; }
.ct-count.is-near { color: #b3261e; }
.ct-recaptcha { transform-origin: 0 0; }
.ct-submit { background: var(--eh-gold); color: var(--eh-ink); border: none; border-radius: 50px; font-weight: 700; padding: .8rem 2rem; display: inline-flex; align-items: center; gap: .5rem; transition: transform .2s ease, box-shadow .2s ease; }
.ct-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(217,164,65,.4); }
.ct-submit[disabled] { opacity: .7; pointer-events: none; }
.ct-alert { display: flex; gap: .75rem; align-items: flex-start; background: #e8f5ec; border: 1px solid #b7dfc3; color: #1e5a33; border-radius: 16px; padding: 1rem 1.2rem; margin-bottom: 1.25rem; }
.ct-alert i { font-size: 1.3rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .ab-intro { grid-template-columns: 1fr; gap: 2rem; }
    .ab-pillars { grid-template-columns: repeat(2, 1fr); }
    .ab-steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
    .ab-step::before { display: none; }
    .ct-grid { grid-template-columns: 1fr; }
    .ct-form-card { order: -1; }
}
@media (max-width: 575.98px) {
    .pg-hero { padding: 2.75rem 0 2.25rem; }
    .pg-section { padding: 2.75rem 0; }
    .ab-pillars { gap: 12px; }
    .ab-pillar { padding: 1.1rem; }
    .ab-steps { grid-template-columns: 1fr; }
    .ab-step { padding-right: 0; }
    .ct-info, .ct-form-card { padding: 1.35rem; border-radius: 20px; }
    .ct-submit { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
    .ct-recaptcha { transform: scale(.85); }
}

/* =====================================================================
   WRITE FOR US (reuses .ct-grid / .ct-info / .ct-form-card from Contact)
   ===================================================================== */
.wf-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.wf-steps li { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.wf-step-no { flex: 0 0 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--eh-gold); color: var(--eh-gold); display: inline-flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 700; }
.wf-steps strong { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.wf-steps span.wf-desc { font-size: .84rem; color: #aab8c5; }
.wf-tips { margin-top: 1.25rem; background: rgba(255,255,255,.07); border-radius: 16px; padding: 1rem 1.2rem; }
.wf-tips h6 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--eh-gold); font-weight: 700; margin-bottom: .6rem; }
.wf-tips ul { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: #cbd5df; }
.wf-tips li { margin-bottom: .35rem; }
.wf-tips li:last-child { margin-bottom: 0; }