/* =====================================================================
   Inner-page styles: detail layouts, sidebars, about, contact, blog,
   careers, gallery. Loaded on content pages.
   ===================================================================== */

/* ---- Detail (single service / industry / post) ---- */
.detail { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.detail__main { min-width: 0; }
.detail__main > * + * { margin-top: var(--sp-4); }
.detail__hero-img { width: 100%; border-radius: var(--r-lg); margin-bottom: var(--sp-5); }
.detail__main h2 { font-size: var(--fs-h3); margin-top: var(--sp-6); }
.detail__cta { margin-top: var(--sp-7); background: var(--gold-tint); border: 1px solid var(--gold-soft); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.detail__cta h3 { color: var(--ink); }
.detail__cta p { margin-top: .25rem; font-size: var(--fs-sm); }

/* Sidebar cards */
.detail__side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: var(--sp-4); }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.side-card__title { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
.side-list { display: grid; gap: .35rem; }
.side-list a { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; font-size: .95rem; transition: background var(--t-fast), color var(--t-fast); }
.side-list a i { color: var(--gold); width: 20px; text-align: center; }
.side-list a:hover { background: var(--gold-tint); color: var(--gold-deep); }
.side-card--ink { background: var(--ink); color: #A7AEB9; }
.side-card--ink h3 { color: #fff; margin-bottom: .5rem; }
.side-card--ink p { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* ---- About page ---- */
.mvv { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.mvv__card { padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.mvv__card i { font-size: 1.6rem; color: var(--gold-strong); }
.mvv__card h3 { margin: var(--sp-3) 0 var(--sp-2); }
.founder { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.founder__photo { aspect-ratio: 3/4; border-radius: var(--r-lg); background: linear-gradient(135deg,var(--ink),var(--ink-3)); display: grid; place-items: center; color: rgba(255,255,255,.14); font-size: 4rem; overflow: hidden; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }
.member { text-align: center; }
.member__photo { aspect-ratio: 1; border-radius: var(--r-lg); background: var(--gold-tint); color: var(--gold-strong); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 2rem; overflow: hidden; margin-bottom: var(--sp-3); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member h4 { margin-bottom: .1rem; }
.member span { font-size: var(--fs-sm); color: var(--muted); }

/* ---- Split feature (housekeeping / facility / training) ---- */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.feature-split--rev .feature-split__media { order: 2; }
.feature-split__media { aspect-ratio: 4/3; border-radius: var(--r-xl); background: linear-gradient(135deg,var(--ink),var(--ink-3)); display: grid; place-items: center; color: rgba(255,255,255,.1); font-size: 4rem; overflow: hidden; }
.feature-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.contact-info { display: grid; gap: var(--sp-4); }
.contact-info__item { display: flex; gap: 1rem; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.contact-info__item .ic { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--gold-tint); color: var(--gold-strong); display: grid; place-items: center; font-size: 1.1rem; }
.contact-info__item b { display: block; color: var(--ink); font-family: var(--font-display); margin-bottom: .15rem; }
.contact-info__item a, .contact-info__item span { color: var(--steel); font-size: var(--fs-sm); }
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--r-lg); margin-top: var(--sp-4); filter: grayscale(.2); }

/* ---- Filter pills ---- */
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-6); }
.filter-pill { padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface); transition: all var(--t-fast); }
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Blog article ---- */
.article { max-width: 760px; margin-inline: auto; }
.article__meta { display: flex; gap: 1rem; color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-4) 0; }
.article__img { width: 100%; border-radius: var(--r-lg); margin: var(--sp-5) 0; }
.article__body { font-size: var(--fs-lead); line-height: 1.75; }
.article__body > * + * { margin-top: var(--sp-5); }
.article__body h2 { font-size: var(--fs-h3); }

/* ---- Careers ---- */
.job { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: box-shadow var(--t), border-color var(--t); flex-wrap: wrap; }
.job:hover { box-shadow: var(--sh-2); border-color: var(--gold-soft); }
.job__meta { display: flex; gap: .8rem; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); margin-top: .35rem; }
.job__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.job__meta i { color: var(--gold); }

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.gallery-grid figure { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); position: relative; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.06); }

/* ---- Clients wall ---- */
.clients-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
.client-tile { display: grid; place-items: center; text-align: center; min-height: 120px; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-family: var(--font-display); font-weight: 700; color: var(--steel); transition: color var(--t), border-color var(--t), transform var(--t); }
.client-tile:hover { color: var(--ink); border-color: var(--gold-soft); transform: translateY(-3px); }
.client-tile img { max-height: 60px; filter: grayscale(1); opacity: .75; }
.client-tile:hover img { filter: none; opacity: 1; }

/* ---- Empty state ---- */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); }
.empty-state i { font-size: 2.4rem; color: var(--gold); }
.empty-state h3 { margin: var(--sp-3) 0 var(--sp-2); }
.empty-state p { color: var(--muted); max-width: 40ch; margin-inline: auto; margin-bottom: var(--sp-4); }

/* ---- Search ---- */
.search-form { display: flex; gap: .6rem; }
.search-form .input { flex: 1; }
.search-results { display: grid; gap: .6rem; }
.search-result { display: block; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t), box-shadow var(--t); }
.search-result:hover { border-color: var(--gold-soft); box-shadow: var(--sh-1); }
.search-result b { display: block; color: var(--ink); font-family: var(--font-display); }
.search-result span { color: var(--steel); font-size: var(--fs-sm); }

/* =====================================================================
   PREMIUM POLISH (inner pages) — depth, gold accents, micro-motion.
   ===================================================================== */
/* Detail: hero image depth + accented CTA */
.detail__hero-img { box-shadow: 0 30px 60px -42px rgba(20,22,26,.42); }
.detail__cta { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--gold-tint) 0%, var(--surface) 92%); }
.detail__cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }

/* Sidebar cards */
.side-card { transition: box-shadow var(--t), border-color var(--t); }
.side-card:hover { box-shadow: var(--sh-2); }
.side-card--ink { background: linear-gradient(160deg, #1b1f27, var(--ink)); border-color: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.side-card--ink::after { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 200px 200px; opacity: .05; mix-blend-mode: overlay; pointer-events: none; }
.side-card--ink > * { position: relative; z-index: 1; }

/* Mission / Vision / Values cards */
.mvv__card { position: relative; overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.mvv__card::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: var(--gold); transition: width .4s var(--ease); }
.mvv__card:hover::before { width: 100%; }
.mvv__card:hover { transform: translateY(-5px); box-shadow: 0 26px 52px -30px rgba(20,22,26,.4); border-color: var(--gold-soft); }
.mvv__card i { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--gold-tint); }

/* Founder & team photos */
.founder__photo { box-shadow: 0 40px 80px -52px rgba(20,22,26,.5); }
.member__photo { box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t); }
.member:hover .member__photo { transform: translateY(-4px); box-shadow: var(--sh-2); }

/* Split feature media */
.feature-split__media { box-shadow: 0 50px 90px -56px rgba(20,22,26,.5); }

/* Contact info + map */
.contact-info__item { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.contact-info__item:hover { border-color: var(--gold-soft); box-shadow: var(--sh-1); transform: translateY(-2px); }
.contact-info__item .ic { transition: background var(--t), color var(--t); }
.contact-info__item:hover .ic { background: var(--gold); color: #fff; }
.map-embed { box-shadow: var(--sh-1); }

/* Job listings: gold rail on hover */
.job { position: relative; overflow: hidden; }
.job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); transition: width var(--t); }
.job:hover::before { width: 4px; }

/* Gallery + clients depth */
.gallery-grid figure { box-shadow: var(--sh-1); }
.client-tile { box-shadow: 0 1px 2px rgba(20,22,26,.04); }

/* Blog article: editorial drop-cap + refined image */
.article__img { box-shadow: 0 30px 60px -44px rgba(20,22,26,.4); }
.article__body > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 800; font-size: 3.1em; line-height: .82; float: left; margin: .06em .12em 0 0; color: var(--gold-strong); }

/* Search results + empty state */
.search-result { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.search-result:hover { transform: translateY(-2px); }
.empty-state i { background: var(--gold-tint); width: 78px; height: 78px; border-radius: 50%; display: inline-grid; place-items: center; }

/* "Why integrated" grid (dark section — was unstyled) */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.why__item { position: relative; overflow: hidden; padding: var(--sp-6);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); background: rgba(255,255,255,.03);
  transition: transform var(--t), border-color var(--t), background var(--t); }
.why__item::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: var(--gold); transition: width .4s var(--ease); }
.why__item:hover::before { width: 100%; }
.why__item:hover { transform: translateY(-5px); border-color: rgba(227,166,60,.4); background: rgba(255,255,255,.05); }
.why__item i { font-size: 1.45rem; color: var(--gold-bright); display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: var(--r-md); background: rgba(227,166,60,.12); margin-bottom: var(--sp-4); }
.why__item h3 { color: #fff; margin-bottom: var(--sp-2); }
.why__item p { color: #A7AEB9; font-size: var(--fs-sm); margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; }
  .detail__side { position: static; }
  .mvv { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder__photo { max-width: 380px; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split--rev .feature-split__media { order: 0; }
  .feature-split__media { aspect-ratio: 16/10; max-height: 420px; }
  .contact-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .clients-grid { grid-template-columns: repeat(2,1fr); }
  .why__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .detail__cta { flex-direction: column; align-items: flex-start; }
  .detail__cta .btn { width: 100%; }
  .job { flex-direction: column; align-items: flex-start; }
  .job .btn { width: 100%; }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: 1fr; }
}