/* Appendix Media — restructure components.
   Extension of styles.css (which is unchanged) for the restructured
   pages: index, offer, about-us, contact. Same design tokens:
   Urbanist headings, Roboto body, white base, #F0F5FA wash,
   slate text, #046bd2 accent blue, radius 18px, soft shadow. */

/* ---------- Badges & chips ---------- */
.badge{
  display:inline-block;
  font-family:'Urbanist',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);background:var(--soft);
  border:1px solid #E5EAF1;border-radius:999px;
  padding:6px 14px;
}
.badge.rust{color:#9a4a1f;background:#FBF1E8;border-color:#F0DCC8}
.chip-list{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  list-style:none;margin:22px 0 0;padding:0;
}
.chip-list li{
  font-family:'Urbanist',sans-serif;font-weight:700;letter-spacing:.04em;
  font-size:.92rem;color:var(--steel);border:1px solid var(--border);
  background:#fff;padding:9px 18px;border-radius:999px;
}

/* ---------- Hero additions ---------- */
.hero-meta{font-size:.98rem;color:var(--steel);margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ---------- Tier teaser cards (home) ---------- */
.tier-card{display:flex;flex-direction:column}
.tier-card .badge{align-self:flex-start;margin-bottom:16px}
.tier-sub{
  font-family:'Roboto Slab',serif;color:var(--steel);
  font-size:1.05rem;margin:-4px 0 12px;
}
.tier-link{
  margin-top:auto;padding-top:16px;
  font-family:'Urbanist',sans-serif;font-weight:700;
}

/* ---------- Offer tier blocks ---------- */
.tier-block{
  background:#fff;border:1px solid #E5EAF1;border-radius:var(--radius);
  padding:44px 46px;box-shadow:var(--shadow);margin:0 0 30px;
  scroll-margin-top:110px;
}
.tier-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.t-num{
  font-family:'Urbanist',sans-serif;font-weight:800;
  font-size:1.5rem;color:var(--blue);line-height:1;
}
.tier-block h2{font-size:2.1rem;margin-bottom:.15em}
.tier-block .tier-sub{font-size:1.15rem;margin:0 0 16px}
.tier-lede{font-size:1.08rem;max-width:56rem}
.check-list{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 34px;
}
.check-list li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid #EEF2F7}
.check-list li::before{
  content:"";position:absolute;left:0;top:13px;width:16px;height:16px;
  background:var(--blue);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.check-list.one-col{grid-template-columns:1fr}
.tier-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:30px;padding-top:24px;border-top:1px solid #EEF2F7;
}
.price-line{font-size:1.05rem;color:var(--ink);margin:0}
.price-line em{font-style:italic}

/* ---------- People (about) ---------- */
.person-role{
  font-family:'Urbanist',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;font-size:.78rem;font-weight:700;
  color:var(--steel);margin:0 0 10px;
}

/* ---------- Capability cards with paragraphs ---------- */
.cap-card p{margin:6px 0 0}

/* ---------- Contact ---------- */
.cta-actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px;
}
.contact-block h2{font-size:2.3rem}
.contact-block .btn{margin-top:6px}
.mail-link{
  font-family:'Urbanist',sans-serif;font-weight:700;font-size:1.08rem;
  word-break:break-all;
}
.card-action{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .tier-block{padding:32px 24px}
  .check-list{grid-template-columns:1fr}
  .contact-block h2{font-size:1.9rem}
}

/* ---------- Sticky header at every width ----------
   styles.css already pins .site-header (position:sticky) on desktop,
   but its <=860px block sets it back to position:relative, so on
   phones the bar scrolled away. Oro wants the slim logo + menu bar
   pinned at the top on scroll everywhere. This restores sticky in
   the mobile range; desktop was already sticky and is unchanged. */
@media (max-width:860px){
  .site-header{position:sticky;top:0;z-index:50}
}

/* ---------- Home video hero (Nov 4, 2026) ----------
   Full-viewport looping video with the steel-blue tint, white logo
   lockup, slogan, black Our Work pill and round social buttons,
   mirroring the WordPress home hero Oro pointed at. */
.hero-video{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#1E3A4F,#316284 58%,#24455E);
}
@media (min-width:861px){
  .hero-video{min-height:max(100svh,640px)}
}
.hero-video-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-video-tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(30,58,79,.60),
    rgba(49,98,132,.55) 52%,
    rgba(30,58,79,.66));
}
.hero-video-content{
  position:relative;z-index:2;
  max-width:760px;padding:96px 24px 84px;
}
.hero-video-logo{width:min(330px,68vw);margin:0 auto}
.hero-video-slogan{
  font-family:'Urbanist',sans-serif;font-weight:700;
  color:#fff;font-size:clamp(1.7rem,4.6vw,2.7rem);
  line-height:1.2;margin:36px 0 0;
  text-shadow:0 2px 18px rgba(10,25,38,.35);
}
.btn-work{
  display:inline-block;margin-top:40px;
  background:#111111;color:#fff;
  font-family:'Urbanist',sans-serif;font-weight:700;font-size:1.25rem;
  padding:16px 48px;border-radius:16px;
}
.btn-work:hover{background:#000000;color:#fff}
.hero-video-socials{
  display:flex;gap:18px;justify-content:center;margin-top:36px;
}
.hero-video-socials a{
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
}
.hero-video-socials a:hover{background:rgba(255,255,255,.14)}
.hero-video-socials svg{width:23px;height:23px;fill:#fff}
@media (max-width:860px){
  .hero-video-content{padding:76px 20px 68px}
}

/* ---------- Home headline block (under the video hero) ---------- */
.headline-block h1{font-size:2.9rem;font-weight:800}
.headline-block .standfirst{
  font-family:'Urbanist',sans-serif;font-weight:700;
  font-size:clamp(1.35rem,3vw,1.7rem);
  color:var(--steel);margin:2px 0 18px;
}
.headline-block .hero-actions{justify-content:center}
@media (max-width:860px){
  .headline-block h1{font-size:2.2rem}
}