/* ============================================================
   KRAPHIE GROUP UK — Page-level styles (service & supporting pages)
   Extends kraphie.css — do not duplicate base tokens
   ============================================================ */

/* ── Page hero (service pages) ── */
.page-hero {
  min-height: 55vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy);
  padding-top: 72px;
}
.page-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 35%;
}
.page-hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14,30,39,0.35) 0%,
    rgba(14,30,39,0.55) 40%,
    rgba(14,30,39,0.92) 100%
  );
}
.page-hero__content {
  position: relative; z-index: 2;
  padding: 72px 0 56px;
  width: 100%;
}
.page-hero__eyebrow {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 14px;
}
.page-hero__title { color: var(--white); margin-bottom: 16px; }
.page-hero__title em { color: var(--teal); font-style: italic; }
.page-hero__sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.75);
  max-width: 620px; margin-bottom: 36px; line-height: 1.7;
}
.page-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,0.45); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb .sep { font-size: 0.65rem; }

/* ── Intro band ── */
.intro-band {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
}
.intro-band__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.intro-band__img {
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16/10;
}
.intro-band__img img { width: 100%; height: 100%; object-fit: cover; }
.intro-band__text h2 { margin-bottom: 16px; }
.intro-band__text p { margin-bottom: 16px; }
.intro-band__text p:last-of-type { margin-bottom: 24px; }

/* ── Includes grid ── */
.includes-section { background: var(--off-white); }
.includes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px; margin-top: 0;
}
.include-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px;
  transition: var(--transition);
}
.include-card:hover { border-color: var(--border-teal); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.include-card__icon {
  font-size: 1.6rem; margin-bottom: 14px; display: block;
}
.include-card h4 { font-size: 0.95rem; margin-bottom: 8px; }
.include-card p { font-size: 0.86rem; margin: 0; }

/* ── Process steps ── */
.process-section { background: var(--white); }
.process-steps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0; position: relative; margin-top: 0;
}
.process-steps::before {
  content: '';
  position: absolute; top: 28px; left: 40px; right: 40px; height: 1px;
  background: var(--border); z-index: 0;
}
.process-step {
  position: relative; z-index: 1;
  text-align: center; padding: 0 20px 0;
}
.process-step__num {
  width: 56px; height: 56px;
  background: var(--navy); color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-size: 1.3rem;
  margin: 0 auto 20px;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.process-step__num.teal { background: var(--teal); }
.process-step h4 { font-size: 0.95rem; margin-bottom: 8px; }
.process-step p { font-size: 0.84rem; }

/* ── Why choose us (benefits) ── */
.benefits-section { background: var(--navy); color: var(--white); }
.benefits-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.benefit-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md); padding: 28px;
  transition: var(--transition);
}
.benefit-card:hover { background: rgba(27,181,178,0.08); border-color: rgba(27,181,178,0.25); }
.benefit-card__icon { font-size: 1.6rem; margin-bottom: 14px; }
.benefit-card h4 { font-size: 0.95rem; color: var(--white); margin-bottom: 8px; }
.benefit-card p { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin: 0; }

/* ── CTA band ── */
.cta-band {
  background: var(--teal);
  padding: 72px 0;
  text-align: center;
}
.cta-band.dark { background: var(--navy); }
.cta-band.gold { background: var(--gold); }
.cta-band h2 { color: var(--white); margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto 32px; font-size: 1.05rem; }
.cta-band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn--outline { border-color: rgba(255,255,255,0.5); color: var(--white); }
.cta-band .btn--outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.cta-band .btn--white {
  background: var(--white); color: var(--teal);
}
.cta-band.dark .btn--white { color: var(--navy); }
.cta-band.gold .btn--white { color: #8a6a20; }
.cta-band .btn--white:hover { background: rgba(255,255,255,0.92); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── BA slider (reused) ── */
.ba-full {
  position: relative; border-radius: var(--r-xl);
  overflow: hidden; cursor: ew-resize;
  user-select: none; max-width: 860px;
  margin: 0 auto; aspect-ratio: 16/9;
}
.ba-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-full .ba-after { clip-path: inset(0 50% 0 0); }
.ba-full .ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--white); pointer-events: none;
}
.ba-full .ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--navy);
  box-shadow: var(--shadow-lg); pointer-events: none;
  font-weight: 700;
}
.ba-label-set {
  position: absolute; bottom: 16px;
  display: flex; justify-content: space-between;
  width: 100%; padding: 0 16px; pointer-events: none;
}
.ba-label-set span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 4px;
}

/* ── Hoarding-specific ── */
.sensitivity-banner {
  background: var(--teal-light);
  border: 1px solid rgba(27,181,178,0.25);
  border-radius: var(--r-md);
  padding: 20px 24px;
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 40px;
}
.sensitivity-banner .icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.sensitivity-banner p { font-size: 0.9rem; color: var(--slate); margin: 0; line-height: 1.7; }
.sensitivity-banner strong { color: var(--navy); }

/* ── Shoe care price estimator ── */
.price-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.price-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.price-row:last-child { border-bottom: none; }
.price-row:hover { background: var(--off-white); }
.price-row .name { font-size: 0.9rem; font-weight: 500; color: var(--navy); }
.price-row .desc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.price-row .price { font-size: 0.95rem; font-weight: 700; color: var(--teal); white-space: nowrap; }

/* ── About timeline ── */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: ''; position: absolute;
  left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: var(--border);
}
.timeline-item { position: relative; margin-bottom: 32px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
  position: absolute; left: -29px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--teal);
}
.timeline-item h4 { font-size: 0.9rem; margin-bottom: 4px; }
.timeline-item p { font-size: 0.85rem; margin: 0; }
.timeline-year {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 6px; display: block;
}

/* ── Team cards ── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.team-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: var(--transition);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-card__img { height: 240px; overflow: hidden; background: var(--off-white); }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 20px 22px; }
.team-card__body h4 { font-size: 1rem; margin-bottom: 2px; }
.team-card__body .role { font-size: 0.8rem; color: var(--teal); font-weight: 600; margin-bottom: 8px; }
.team-card__body p { font-size: 0.83rem; margin: 0; }

/* ── Values grid ── */
.values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.value-item {
  text-align: center; padding: 32px 20px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); transition: var(--transition);
}
.value-item:hover { border-color: var(--border-teal); transform: translateY(-2px); }
.value-item .icon { font-size: 2rem; margin-bottom: 14px; display: block; }
.value-item h4 { font-size: 0.95rem; margin-bottom: 8px; }
.value-item p { font-size: 0.82rem; margin: 0; }

/* ── Contact page ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.contact-info-blocks { display: flex; flex-direction: column; gap: 16px; }
.contact-block {
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 20px 24px;
  display: flex; align-items: flex-start; gap: 16px;
  text-decoration: none; transition: var(--transition);
}
.contact-block:hover { border-color: var(--border-teal); background: var(--teal-light); }
.contact-block .cb-icon {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.contact-block .cb-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.contact-block .cb-value { font-size: 0.95rem; font-weight: 600; color: var(--navy); }
.contact-block .cb-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.hours-table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.hours-table tr td { padding: 6px 0; color: var(--muted); }
.hours-table tr td:first-child { font-weight: 600; color: var(--navy); width: 50%; }
.map-placeholder {
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 32px; text-align: center;
  margin-top: 20px;
}
.map-placeholder p { font-size: 0.85rem; color: var(--muted); margin: 8px 0 0; }

/* ── Shared gallery mini-grid ── */
.mini-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 0; }
.mini-gallery .mg-item { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; position: relative; }
.mini-gallery .mg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mini-gallery .mg-item:hover img { transform: scale(1.06); }
.mini-gallery .mg-item .mg-overlay {
  position: absolute; inset: 0; background: rgba(14,30,39,0.45);
  opacity: 0; display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 1.4rem; transition: var(--transition);
}
.mini-gallery .mg-item:hover .mg-overlay { opacity: 1; }

/* ── Responsive overrides ── */
@media (max-width: 900px) {
  .intro-band__grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .process-steps { gap: 32px; }
  .process-steps::before { display: none; }
  .page-hero { min-height: 50vh; }
  .mini-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .page-hero__actions { flex-direction: column; }
  .page-hero__actions .btn { justify-content: center; }
}


/* ============================================================
   ENHANCEMENTS v4 — Media integration, pricing removal,
   shoe-care coming-soon, reviews disclaimer, perf tweaks
   ============================================================ */

/* ── Media showcase sections ── */
.media-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 0;
}
.media-showcase .ms-item {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
  background: var(--navy);
}
.media-showcase .ms-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
  display: block;
}
.media-showcase .ms-item:hover img { transform: scale(1.05); }
.media-showcase .ms-item .ms-overlay {
  position: absolute; inset: 0;
  background: rgba(14,30,39,0.42);
  opacity: 0; display: flex;
  align-items: center; justify-content: center;
  transition: opacity 0.3s;
  color: #fff; font-size: 1.6rem;
}
.media-showcase .ms-item:hover .ms-overlay { opacity: 1; }
.media-showcase .ms-item.tall { aspect-ratio: 3/4; }
.media-showcase .ms-item.wide { grid-column: span 2; aspect-ratio: 16/9; }

/* ── Video card ── */
.video-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background: var(--navy);
  aspect-ratio: 16/9;
  cursor: pointer;
}
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card .vc-overlay {
  position: absolute; inset: 0;
  background: rgba(14,30,39,0.38);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s;
}
.video-card .vc-overlay.hidden { opacity: 0; pointer-events: none; }
.video-card .vc-play {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--white); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: var(--shadow-lg);
  transition: transform 0.25s ease;
}
.video-card:hover .vc-play { transform: scale(1.1); }

/* ── Before/After (full-width drag slider) ── */
.ba-slider-wrap { margin-top: 0; }
.ba-slider-caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 10px;
}

/* ── Enquiry-led wording replaces pricing ── */
.enquiry-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--teal-light);
  border: 1px solid rgba(27,181,178,0.25);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 24px 0;
}
.enquiry-note .icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.enquiry-note strong { color: var(--navy); }

/* ── Coming Soon banner (Shoe Care) ── */
.coming-soon-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #163040 100%);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.coming-soon-banner .csb-left { display: flex; align-items: center; gap: 16px; }
.coming-soon-banner .csb-icon { font-size: 2rem; }
.coming-soon-banner h3 { color: var(--gold); font-family: var(--ff-display); font-size: 1.3rem; margin-bottom: 4px; }
.coming-soon-banner p { color: rgba(255,255,255,0.65); font-size: 0.88rem; margin: 0; }
.csb-badge {
  background: var(--gold);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 99px;
  white-space: nowrap;
}

/* ── Reviews disclaimer ── */
.reviews-disclaimer {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 16px;
  text-align: center;
}
.reviews-placeholder-notice {
  background: var(--off-white);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 0.83rem;
  color: var(--muted);
  text-align: center;
  margin-top: 20px;
}

/* ── Waiting list / interest form ── */
.waitlist-form {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px;
}
.waitlist-form h3 {
  font-family: var(--ff-display);
  font-size: 1.3rem; color: var(--navy);
  margin-bottom: 8px;
}
.waitlist-form p { font-size: 0.88rem; margin-bottom: 24px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input[type="email"],
.inline-form input[type="text"] {
  flex: 1; min-width: 200px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.9rem; font-family: var(--ff-body);
  color: var(--slate); background: var(--white);
  outline: none; transition: border-color 0.2s;
}
.inline-form input:focus { border-color: var(--teal); }
.waitlist-success {
  display: none; text-align: center; padding: 24px 0;
}
.waitlist-success .ws-icon { font-size: 2.5rem; margin-bottom: 10px; }

/* ── OG / SEO meta helper (visual only — schema injected in <head>) ── */

/* ── Image aspect overrides for portrait shots ── */
.portrait-crop {
  aspect-ratio: 3/4 !important;
}
.landscape-crop {
  aspect-ratio: 16/9 !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .media-showcase .ms-item.wide { grid-column: span 1; aspect-ratio: 4/3; }
  .coming-soon-banner { flex-direction: column; text-align: center; }
  .coming-soon-banner .csb-left { flex-direction: column; text-align: center; }
  .waitlist-form { padding: 24px 20px; }
  .inline-form { flex-direction: column; }
  .inline-form input { min-width: 100%; }
}