/*
 * Shared inner-page components (About Us, Contact Us).
 *
 *   .crumbs      breadcrumb        → futuretec_breadcrumb()
 *   .inner-hero  navy page hero    → template-parts/components/page-hero.php
 *   .cta-box     closing CTA box   → template-parts/components/cta-box.php
 *
 * Built on main.css tokens; same breakpoints as main.css (1280/1100/860/600).
 */

/* ---------- Breadcrumb ---------- */
.crumbs ol{ display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.88rem; font-weight:500; color:rgba(255,255,255,.7); }
.crumbs li{ display:flex; align-items:center; gap:12px; }
.crumbs li + li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--coral); }
.crumbs a{ color:#fff; transition:color .2s; }
.crumbs a:hover{ color:var(--sky); }
.crumbs [aria-current]{ color:var(--sky); }

/* ---------- Page hero ---------- */
.inner-hero{ position:relative; overflow:hidden; background:var(--navy); }
.inner-hero__grid{
  position:absolute; left:0; top:0; width:300px; height:100%;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(90deg, #000, transparent); mask-image:linear-gradient(90deg, #000, transparent);
  pointer-events:none;
}
.inner-hero__in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:end; min-height:560px; }
.inner-hero__copy{ align-self:center; padding:90px 0; }
.inner-hero__title{ margin-top:26px; font-size:clamp(2.6rem, 5vw, 4.6rem); font-weight:600; line-height:1.08; color:#fff; }
.inner-hero .hero__rule{ max-width:520px; margin:36px 0 32px; }
.inner-hero__text{ max-width:500px; font-size:1.08rem; line-height:1.75; color:rgba(255,255,255,.9); }
.inner-hero__media{ position:relative; height:480px; margin-top:80px; }
.inner-hero__media > img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:50% 50% 0 0 / 48% 48% 0 0; }
.inner-hero__ring{ position:absolute; right:-70px; top:-50px; width:260px; height:260px; border-radius:50%; border:1px solid rgba(255,255,255,.12); }
.inner-hero__ring::after{ content:""; position:absolute; inset:40px; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.inner-hero__badge{
  position:absolute; z-index:2; left:-40px; bottom:56px;
  width:210px; padding:24px 26px;
  background:#fff; border-radius:10px;
  box-shadow:10px 4px 60px rgba(4,20,30,.28);
}
.inner-hero__badge strong{ display:block; font-family:var(--ff-head); font-size:3rem; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.inner-hero__badge sup{ margin-left:2px; font-size:.55em; color:var(--coral); }
.inner-hero__badge span{ display:block; margin-top:10px; font-size:.95rem; line-height:1.45; }
.inner-hero--text .inner-hero__in{ grid-template-columns:minmax(0,760px); min-height:0; }

/* ---------- Closing CTA box ---------- */
.cta-box{ padding:0 0 120px; }
.cta-box__box{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:30px 60px;
  padding:72px 70px;
  background:var(--navy);
}
.cta-box__bg{ position:absolute; right:0; top:0; width:55%; height:100%; object-fit:cover; }
.cta-box__box::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, var(--navy) 45%, rgba(7,40,58,.6) 75%, rgba(7,40,58,.3)); }
.cta-box__copy, .cta-box__box > .btn{ position:relative; z-index:2; }
.cta-box__copy{ max-width:620px; }
.cta-box__copy .title{ margin-top:0; }
.cta-box__copy p{ margin-top:16px; font-size:1.05rem; line-height:1.7; color:rgba(255,255,255,.88); }
.cta-box__box > .btn{ flex:none; min-width:190px; }

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .inner-hero__badge{ left:-20px; }
}

@media (max-width:1100px){
  .inner-hero__in{ gap:40px; min-height:0; }
  .inner-hero__media{ height:400px; }
  .inner-hero__badge{ left:16px; bottom:24px; }
  .cta-box__box{ padding:60px 48px; }
}

@media (max-width:860px){
  .inner-hero__in{ grid-template-columns:1fr; gap:0; }
  .inner-hero__copy{ padding:64px 0 48px; }
  .inner-hero__media{ height:340px; margin-top:0; }

  .cta-box{ padding-bottom:88px; }
  .cta-box__box{ flex-direction:column; align-items:flex-start; padding:52px 32px; }
  .cta-box__bg{ width:100%; opacity:.35; }
  .cta-box__box::before{ background:linear-gradient(180deg, rgba(7,40,58,.7), var(--navy)); }
}

@media (max-width:600px){
  .inner-hero__media{ height:280px; }
  .inner-hero__badge{ width:170px; padding:18px 20px; }
  .inner-hero__badge strong{ font-size:2.4rem; }
  .inner-hero__ring{ right:-110px; }
  .cta-box__box > .btn{ width:100%; }
}