/* ===================== PAGE HERO (inner pages) ===================== */
.page-hero{
  position:relative;
  padding-top:calc(88px + var(--sp-8));
  padding-bottom:var(--sp-7);
  background:linear-gradient(180deg, rgba(15,30,56,0.75) 0%, rgba(15,30,56,0.88) 100%), url('../assets/img/page-hero.jpg') center/cover no-repeat;
  background-color:var(--navy-900);
}
.page-hero__crumb{
  font-family:var(--font-head);font-size:var(--fs-micro);font-weight:600;
  color:rgba(255,255,255,0.55);letter-spacing:0.04em;margin-bottom:var(--sp-4);
  display:flex;gap:8px;align-items:center;
}
.page-hero__crumb a{color:rgba(255,255,255,0.55)}
.page-hero__crumb a:hover{color:var(--white)}
.page-hero h1{color:var(--white);max-width:820px}
.page-hero p{color:rgba(255,255,255,0.78);max-width:600px;margin-top:var(--sp-4)}

/* ===================== SERVICE DETAIL BLOCKS ===================== */
.service-detail{padding:var(--sp-8) 0;border-bottom:1px solid var(--color-border)}
.service-detail:last-child{border-bottom:none}
.service-detail__grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--sp-8);align-items:start}
.service-detail.reverse .service-detail__grid{grid-template-columns:1.15fr 0.85fr}
.service-detail.reverse .service-detail__media{order:2}
.service-detail__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);position:sticky;top:120px}
.service-detail__media img{width:100%;height:100%;object-fit:cover}
.service-detail__index{font-family:var(--font-head);font-size:var(--fs-small);font-weight:700;color:var(--bronze-500);margin-bottom:var(--sp-3)}

.service-detail__media.icon-panel{
  background:var(--grey-100);
  border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.icon-panel__bignum{
  position:absolute;
  font-family:var(--font-head);font-weight:800;
  font-size:9rem;line-height:1;color:var(--white);
  -webkit-text-stroke:1.5px var(--grey-200);
  color:transparent;
  user-select:none;
}
.icon-panel__inner{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);
  color:var(--navy-800);
}
.icon-panel__inner svg{width:64px;height:64px;stroke-width:1.3}
.icon-panel__inner span{
  font-family:var(--font-head);font-size:var(--fs-small);font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--bronze-600);
}
.service-detail h2{margin-bottom:var(--sp-4)}
.service-detail__overview{font-size:var(--fs-body-lg);color:var(--charcoal-700);margin-bottom:var(--sp-6)}

.service-detail__subhead{
  font-family:var(--font-head);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--navy-800);
  margin-bottom:var(--sp-4);
}
.benefit-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-6)}
.benefit-list li{
  font-size:var(--fs-small);color:var(--charcoal-700);
  display:flex;gap:10px;align-items:flex-start;
}
.benefit-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--bronze-500);margin-top:7px;flex-shrink:0}

.process-steps{display:flex;flex-direction:column;margin-bottom:var(--sp-6)}
.process-step{display:flex;gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--color-border)}
.process-step:last-child{border-bottom:1px solid var(--color-border)}
.process-step__num{font-family:var(--font-head);font-weight:700;color:var(--slate-500);min-width:28px;font-size:var(--fs-small)}
.process-step__body h4{font-size:var(--fs-body);margin-bottom:2px}
.process-step__body p{font-size:var(--fs-small);margin:0}

/* ===================== VALUE / MISSION CARDS ===================== */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.value-card{padding:var(--sp-6) var(--sp-5);border:1px solid var(--color-border)}
.value-card__icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--navy-800);border-radius:var(--radius-sm);margin-bottom:var(--sp-4);color:var(--navy-800)}
.value-card__icon svg{width:22px;height:22px}
.value-card h4{margin-bottom:var(--sp-2)}
.value-card p{font-size:var(--fs-small);margin:0}

/* ===================== TIMELINE / STORY ===================== */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:center}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--color-border)}
.stat-row .num{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--navy-900)}
.stat-row .label{font-size:var(--fs-small);color:var(--charcoal-500)}

/* ===================== BEFORE / AFTER ===================== */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.ba-card{border:1px solid var(--color-border);overflow:hidden}
.ba-card__images{display:grid;grid-template-columns:1fr 1fr}
.ba-card__images div{aspect-ratio:1/1;overflow:hidden;position:relative}
.ba-card__images img{width:100%;height:100%;object-fit:cover}
.ba-card__images .tag{position:absolute;top:10px;left:10px;background:rgba(15,30,56,0.85);color:var(--white);font-family:var(--font-head);font-size:var(--fs-micro);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:4px 10px}
.ba-card__body{padding:var(--sp-5)}

/* ===================== FIELD GALLERY (real job photos) ===================== */
.field-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.field-card{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:var(--radius-md)}
.field-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease)}
.field-card:hover img{transform:scale(1.06)}
.field-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,30,56,0.88) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sp-4);
}
.field-card__tag{font-family:var(--font-head);font-size:var(--fs-micro);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--bronze-400);margin-bottom:4px}
.field-card__overlay h4{color:var(--white);font-size:1rem}

/* ===================== REASON LIST (Why Vulcon) ===================== */
.reason-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--color-border);border:1px solid var(--color-border)}
.reason-card{background:var(--white);padding:var(--sp-6);display:flex;gap:var(--sp-5)}
.reason-card__num{font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--bronze-500);min-width:48px}
.reason-card h3{margin-bottom:var(--sp-2)}
.reason-card p{font-size:var(--fs-small);margin:0}

/* ===================== COMMUNITY DETAIL ===================== */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.pillar-card{border:1px solid var(--color-border)}
.pillar-card__media{aspect-ratio:16/10;overflow:hidden}
.pillar-card__media img{width:100%;height:100%;object-fit:cover}
.pillar-card__body{padding:var(--sp-5)}
.pillar-card__media.icon-only{
  background:var(--grey-100);
  display:flex;align-items:center;justify-content:center;
  color:var(--navy-800);
}
.pillar-card__media.icon-only svg{width:48px;height:48px;stroke-width:1.3}
.placeholder-note{
  background:var(--grey-100);border:1px dashed var(--slate-300);
  padding:var(--sp-5);font-size:var(--fs-small);color:var(--charcoal-500);
  margin-top:var(--sp-6);
}

/* ===================== CONTACT ===================== */
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--sp-9)}
.contact-info__block{padding:var(--sp-5) 0;border-bottom:1px solid var(--color-border)}
.contact-info__block:first-child{padding-top:0}
.contact-info__block h4{margin-bottom:var(--sp-2)}
.contact-info__block p,.contact-info__block a{font-size:var(--fs-small);color:var(--charcoal-500)}
.contact-info__block a:hover{color:var(--navy-800)}
.service-areas{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.service-areas span{font-size:var(--fs-micro);border:1px solid var(--color-border);padding:4px 10px;border-radius:20px;color:var(--charcoal-700)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.form-field.full{grid-column:1/-1}
.form-field label{font-family:var(--font-head);font-size:var(--fs-small);font-weight:600;color:var(--navy-900)}
.form-field input,.form-field select,.form-field textarea{
  border:1.5px solid var(--color-border);
  padding:13px 16px;
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--color-text);
  transition:border-color var(--dur-fast) var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--navy-800)}
.form-field textarea{resize:vertical;min-height:120px}
.form-note{font-size:var(--fs-micro);color:var(--charcoal-500);margin-top:var(--sp-3)}

.map-embed-large{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--color-border)}
.map-embed-large iframe{display:block}

/* ===================== RESPONSIVE (pages) ===================== */
@media(max-width:1080px){
  .service-detail__grid{grid-template-columns:1fr}
  .service-detail.reverse .service-detail__grid{grid-template-columns:1fr}
  .service-detail.reverse .service-detail__media{order:0}
  .service-detail__media{position:static;aspect-ratio:16/9}
  .value-grid{grid-template-columns:1fr 1fr}
  .story-grid{grid-template-columns:1fr}
  .ba-grid{grid-template-columns:1fr}
  .reason-grid{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .field-gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .value-grid{grid-template-columns:1fr}
  .benefit-list{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .pillar-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field-gallery{grid-template-columns:1fr}
}