/* =====================================================================
   40 - PUBLIC PAGES - services, about, contact, product details,
   inquiry confirmations, password reset
   (Replaces the page sections of site.css; about_us.css and contact_info.css
   were removed - none of their classes were used by the current pages)
   ===================================================================== */

/* ---------- Services ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Photo cards (Services "What we service" + Home "What we do"): same look as the product category cards -
   the photo fills the card under a dark green overlay, white centred text, white pill button */
.feature-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-height: 320px;
    background: var(--dark-green); border: 0 !important; border-radius: 16px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1); transition: transform .3s ease;
}
.feature-card:hover { transform: translateY(-5px); }
.feature-card .img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.feature-card .img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 45, 25, .75) 0%, rgba(4, 25, 12, .96) 100%);
}
.feature-card .body {
    position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; padding: 35px 30px; text-align: center; color: #fff;
}
.feature-card h4 { font-size: 1.4rem; line-height: 1.25; margin: 0; color: #fff !important; }
.feature-card p { color: #e2e8f0; font-size: .92rem; line-height: 1.5; margin: 0; }
.feature-card .tick-list { text-align: left; margin: 6px auto 0; }
.feature-card .home-card-link { margin-top: auto; }
.feature-card .tick-list:has(+ .home-card-link) { margin-bottom: 22px; }   /* breathing room above the button */
.feature-card .tick-list li { color: #fff; }
.feature-card .tick-list li::before { color: #9fd49a; }
.tick-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 5px; font-size: .88rem; }
.tick-list li { padding-left: 20px; position: relative; color: var(--a-ink); }
.tick-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 700; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { padding: 22px 22px 24px; position: relative; border-right: 1px solid var(--a-line-soft); }
.step:last-child { border-right: 0; }
.step .num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; margin-bottom: 12px;
}
.step h5 { font-size: 1rem; margin: 0 0 6px; }
.step p { color: var(--a-muted); font-size: .88rem; line-height: 1.55; margin: 0; }

.split-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); overflow: hidden; }
.split-band .left { background: radial-gradient(circle at 85% 30%, rgba(0, 120, 60, .55) 0%, var(--dark-green) 70%); color: #fff; padding: 30px; }
.split-band .left h3 { color: #fff; font-size: 1.35rem; margin: 0 0 10px; }
.split-band .left p { color: rgba(255,255,255,.85); font-size: .93rem; line-height: 1.6; margin: 0 0 18px; }
.split-band .right { padding: 22px 26px; display: grid; gap: 14px; align-content: center; }
.phase { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--a-line-soft); }
.phase:last-child { border-bottom: 0; padding-bottom: 0; }
.phase .tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); padding-top: 3px; }
.phase b { display: block; font-size: .95rem; color: var(--a-ink); }
.phase span { font-size: .87rem; color: var(--a-muted); line-height: 1.5; }

/* ---------- About ---------- */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--a-line); }
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -26px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--green); }
.tl-item h5 { font-size: 1rem; margin: 6px 0 4px; }
.tl-item p { color: var(--a-muted); font-size: .9rem; line-height: 1.6; margin: 0; }
.leader-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.leader { text-align: center; padding: 24px 18px; }
.leader .avatar { margin: 0 auto 12px; }
.leader-photo {
    display: block; width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%;
    object-fit: cover; object-position: center 30%; border: 4px solid var(--light-green); box-shadow: var(--a-shadow);
}
.leader h5 { font-size: 1rem; margin: 0 0 2px; }
.leader span { color: var(--a-muted); font-size: .86rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.info-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--a-line-soft); }
.info-row:last-child { border-bottom: 0; }
.info-row .ico { width: 40px; height: 40px; border-radius: 50%; background: var(--a-select); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-row .ico img { width: 18px; height: 18px; filter: brightness(0) invert(18%) sepia(34%) saturate(2256%) hue-rotate(82deg) brightness(96%) contrast(97%); }
.info-row .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--a-faint); font-weight: 700; }
.info-row .v { font-size: .93rem; color: var(--a-ink); }
.info-row .v a { color: var(--green); text-decoration: none; }
.social-row { display: flex; gap: 10px; margin-top: 6px; }
.social-row a { width: 40px; height: 40px; border-radius: 50%; background: var(--green); display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.social-row a:hover { background: var(--dark-green); }
.social-row img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.map-card { overflow: hidden; }
.map-card iframe { display: block; width: 100%; height: 280px; border: 0; }

/* Inquiry submitted: confirmation with the reference number */
.inquiry-confirm { display: flex; gap: 14px; align-items: flex-start; }
.inquiry-confirm .tick {
    width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: #fff; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.inquiry-confirm .ref { font-family: Consolas, Menlo, monospace; font-size: 1.05rem; font-weight: 700; color: var(--dark-green); letter-spacing: .04em; }

/* ---------- Product details (also used by the admin item page) ---------- */
.detail-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 10px 14px;
    box-shadow: var(--a-shadow); margin-bottom: 24px;
}
.detail-bar .grow { flex: 1; }
.detail-bar a.crumb { color: var(--a-muted); text-decoration: none; font-size: .86rem; }
.detail-bar a.crumb:hover { color: var(--green); text-decoration: underline; }
.detail-bar .sep { color: var(--a-faint); font-size: .86rem; }
.detail-bar .here { font-size: .86rem; font-weight: 700; color: var(--a-ink); }
.detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0 0 22px; padding: 14px 0; border-top: 1px solid var(--a-line-soft); border-bottom: 1px solid var(--a-line-soft); }
.detail-facts .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--a-faint); font-weight: 700; }
.detail-facts .v a { color: var(--green); text-decoration: none; font-weight: 700; }
.detail-facts .v a:hover { text-decoration: underline; }
.service-note { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--a-hover); font-size: .86rem; color: var(--a-muted); }
.service-note a { color: var(--green); font-weight: 700; text-decoration: none; }

/* ---------- Home ---------- */
.home-section { max-width: 1040px; margin: 0 auto; padding: 36px 20px 8px; }
.hero-subtitle { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.hero-lead { font-size: 1.05rem; opacity: .9; margin: 14px auto 0; max-width: 620px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
/* One type scale for the home page:
   section title 1.6rem (.site-h2, also used for the image-card titles), section intro 1rem,
   card title 1.08rem, card body .9rem */
.home-intro { padding-top: 52px; }
.home-shell .section-card .card-title, .home-shell .section-card-allubot .card-title { font-size: 1.6rem; line-height: 1.25; margin-bottom: 10px; }
.home-shell .section-card .card-text, .home-shell .section-card-allubot .card-text { font-size: 1rem; line-height: 1.65; }
.home-shell .step h5, .home-shell .know-item b { font-size: 1.08rem; line-height: 1.3; }
.home-shell .step p, .home-shell .know-item p, .home-shell .tick-list { font-size: .9rem; }
.home-shell .site-section-head { margin-bottom: 22px; }
.home-shell .carousel-wrapper { margin-top: 4px; }
.home-tag {
    display: inline-block; background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
/* Same white pill as .category-link-btn on the product category cards */
.home-card-link {
    margin-top: auto; background: #fff; color: #0f3f23; padding: 8px 24px; border-radius: 50px; font-weight: 600;
    font-size: .9rem; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); transition: background-color .2s, color .2s;
}
.home-card-link:hover { background: #0f3f23; color: #fff; }
.know-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.know-item { display: flex; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--a-line-soft); }
.know-item:nth-child(odd) { border-right: 1px solid var(--a-line-soft); }
.know-item:nth-last-child(-n+2) { border-bottom: 0; }
.know-item .num {
    width: 30px; height: 30px; border-radius: 50%; background: var(--a-select); color: var(--green); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.know-item b { display: block; color: var(--a-ink); font-size: .98rem; margin-bottom: 4px; }
.know-item p { color: var(--a-muted); font-size: .88rem; line-height: 1.55; margin: 0; }
@media (max-width: 760px) {
    .know-grid { grid-template-columns: 1fr; }
    .know-item:nth-child(odd) { border-right: 0; }
    .know-item:nth-last-child(2) { border-bottom: 1px solid var(--a-line-soft); }
}

/* ---------- Password reset ---------- */
.reset-card { max-width: 520px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step:nth-child(2) { border-right: 0; }
    .step:nth-child(-n+2) { border-bottom: 1px solid var(--a-line-soft); }
}
@media (max-width: 900px) {
    .feature-grid, .leader-grid, .map-grid, .contact-grid, .split-band { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
    .step { border-right: 0; border-bottom: 1px solid var(--a-line-soft); }
    .step:last-child { border-bottom: 0; }
    .detail-facts { grid-template-columns: 1fr; }
    .phase { grid-template-columns: 1fr; gap: 4px; }
}