/* HERO (split editorial) */
.hero{
  max-width:1200px; margin:24px auto; padding:0 20px;
  display:grid; grid-template-columns: 1.03fr .97fr; gap:15px;
}
.hero-left{
  padding:15px; border-radius:18px; background:linear-gradient(180deg,#f9fafb, #fff);
  border:1px solid rgba(15,15,15,.06);
}
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand);
  background:rgba(14,118,98,.08); padding:6px 10px; border-radius:999px;
}
.hero h1{
  margin:14px 0 8px; line-height:1.05; letter-spacing:-.02em;
  font-size:clamp(28px,4vw,56px); font-weight:900;
}
.hero p.lead{
  color:var(--muted); font-size:clamp(14px,1.8vw,18px); max-width:60ch;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.btn-primary{
  background:var(--accent); color:#fff; border:none; padding:10px 16px; border-radius:12px; font-weight:700;
}
.btn-ghost{
  background:#1e3a5f; color:#fff; border:1px solid #1e3a5f; padding:10px 16px; border-radius:12px; font-weight:700;
}
.hero-right{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start;
}
.hero-card{
  border-radius:16px; overflow:hidden; background:var(--card); border:1px solid rgba(15,15,15,.06);
  display:flex; flex-direction:column; min-height:160px;
}
.hero-card img{width:100%; height:140px; object-fit:cover}
.hero-card .meta{padding:10px 12px}
.meta small{color:var(--muted); font-size:12px}

/* SECTIONS */
.section{
  max-width:1200px; margin:40px auto; padding:0 20px;
}
.section-header{
  display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:14px;
}
.section-title{
  display:flex; align-items:center; gap:10px;
}
.flag{font-size:22px}
.section h2{
  margin:0; font-size:clamp(20px,3vw,30px); letter-spacing:-.01em; font-weight:900;
}
.section p.sub{
  color:var(--muted); margin:2px 0 0; font-size:14px;
}
.view-all{
  font-weight:700; color:var(--brand); text-decoration:none; padding:8px 12px; border-radius:10px;
  border:1px solid rgba(14,118,98,.25);
}

/* Mobile carousel elements — hidden on desktop (visible via mobile media query) */
.rail-nav{ display:none; }
.rail-mob-count{ display:none; }
.rail-mob-wrapper{ position:static; border-radius:0; overflow:visible; isolation:auto; }

/* Horizontal scroll-snap rail */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 320px);
  gap:16px; overflow-x:auto; padding:8px 2px 2px;
  scroll-snap-type:x mandatory;
}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15); border-radius:999px}
.card-tour{
  scroll-snap-align:start;
  background:#fff; border:1px solid rgba(15,15,15,.06); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-tour:hover{transform:translateY(-4px); box-shadow:0 16px 34px -16px rgba(0,0,0,.35)}
.card-tour img{width:100%; height:180px; object-fit:cover}
.card-tour .card-body{padding:12px 14px}
.card-tour .card-body h3{font-size:16px; margin:0 0 4px; font-weight:800; letter-spacing:.1px}
.card-tour .card-body .short{color:var(--muted); font-size:13px}

.badges{
  display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0;
}
.badge{
  font-size:11px; color:#1d1d1d; background:#f1f3f5; padding:5px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.06);
}

.card-tour .card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px 14px;
}
.price{color:var(--gold); font-weight:900}
.btn-mini{
  background:var(--accent); color:#fff; border:none; font-size:13px; padding:8px 10px; border-radius:10px; font-weight:800;
}

/* Hover reveal – details row */
.details{
  border-top:1px dashed rgba(0,0,0,.08);
  margin:10px 14px 0; padding:8px 0 0;
  display:none; font-size:12px; color:#2a2a2a;
  grid-template-columns:1fr 1fr; gap:6px 12px;
}
.card-tour:hover .details{display:grid; animation:fadeUp .22s ease}
.card-tour:hover .card-footer .price{display:none}
.card-tour:hover .card-footer .btn-mini{margin-left:auto}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

/* Responsive */
@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; gap:16px; margin:16px auto; }
  .hero-left{ padding:20px; }
  .hero h1{ font-size:36px; }
  .section{ margin:28px auto; }
  .ueber-section{ padding:40px 16px 24px; }
  .kontakt-section{ padding:40px 16px 0; }
  .kontakt-btns{ flex-direction:column; }
  .btn-k-filled, .btn-k-outline{ text-align:center; }

  /* === Mobile immersive rail carousel === */
  .rail-mob-wrapper{ position:relative; border-radius:16px; overflow:hidden; isolation:isolate; }
  .rail-nav{ display:flex; }
  .rail-mob-count{ display:block; }

  .rail{
    display:flex; grid-auto-flow:unset; grid-auto-columns:unset;
    gap:0; padding:0;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    border-radius:0;
  }
  .rail::-webkit-scrollbar{ display:none; }

  /* Card: image on top, details below */
  .card-tour{
    flex:0 0 100%; min-width:100%;
    height:auto; border-radius:0; border:none;
    box-shadow:none; overflow:hidden; position:relative;
    background:#fff; display:flex; flex-direction:column;
  }
  .card-tour:hover{ transform:none; box-shadow:none; }

  /* Image — static flow, fixed height */
  .card-tour img{
    position:relative; top:auto; left:auto;
    width:100%; height:52vw; object-fit:cover; display:block; flex-shrink:0;
  }

  /* Gradient overlay on image only */
  .card-tour::before{
    content:''; position:absolute;
    top:0; left:0; right:0; height:52vw;
    z-index:1; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.05) 55%, transparent 100%);
  }

  /* Title overlaid on the bottom of the image */
  .card-tour .card-body{
    position:absolute; top:calc(52vw - 95px); left:0; right:0;
    padding:0 16px; z-index:2; background:none;
  }
  .card-tour .card-body h3{ color:#fff; font-size:19px; font-weight:900; margin-bottom:4px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
  .card-tour .card-body .short{ color:rgba(255,255,255,.8); font-size:13px; }
  .card-tour .card-body .badges{ margin-top:7px; }
  .card-tour .card-body .badge{ background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.25); }

  /* Details — always visible below the image */
  .card-tour .details{
    display:grid !important;
    margin:0; padding:12px 16px 4px;
    border-top:1px dashed rgba(0,0,0,.08);
    background:#fff; position:static;
  }

  /* Card footer — below details, normal flow */
  .card-tour .card-footer{
    position:static; padding:8px 16px 14px;
    background:#fff; border:none; margin-top:auto;
  }
  .card-tour .card-footer .price{ display:none; }
  .card-tour .card-footer{ justify-content:flex-end; }

  /* Prev / Next arrows — positioned relative to wrapper, centred on image */
  .rail-nav{
    position:absolute; top:calc(52vw / 3); transform:translateY(-50%);
    background:#fff; color:var(--brand);
    border:none; outline:none;
    font-size:14px; line-height:1;
    width:28px; height:28px; border-radius:50%;
    cursor:pointer; z-index:30;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 18px rgba(0,0,0,.28);
    transition:transform .2s, box-shadow .2s;
  }
  .rail-nav:hover{ transform:translateY(-50%) scale(1.1); box-shadow:0 6px 22px rgba(0,0,0,.38); }
  .rail-prev{ left:10px; }
  .rail-next{ right:10px; }

  /* Tour count badge — sits on the image */
  .rail-mob-count{
    position:absolute; top:12px; left:12px; z-index:10;
    background:rgba(0,0,0,.38); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    color:#fff; font-size:13px; font-weight:600;
    padding:5px 13px; border-radius:999px; pointer-events:none;
  }
}

/* Micro-interactions */
.hero-card img{transition:transform .6s ease}
.hero-card:hover img{transform:scale(1.05)}

.section,
.ueber-section,
.kontakt-section,
.catalog-fan-section{
  content-visibility:auto;
  contain-intrinsic-size:1px 760px;
}

/* Hero video */
.hero-video{
    position: relative;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video video{
    width: 100%;
    border-radius: 18px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

@media (max-width: 880px){
    .hero-video{
        aspect-ratio: 16 / 9; /* Landscape pa rin sa mobile */
        border-radius: 14px;
    }
}

.hero-video-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(0,0,0,.30); cursor:pointer;
  transition:background .25s;
  border:none; width:100%;
}
.hero-video-overlay:hover{ background:rgba(0,0,0,.44); }
.hero-video-overlay.hidden{ display:none; }
.hero-play-btn{
  width:76px; height:76px; border-radius:50%;
  background:rgba(255,255,255,.94); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,.40);
  transition:transform .2s, box-shadow .2s;
  flex-shrink:0; pointer-events:none;
}
.hero-play-btn svg{ width:30px; height:30px; fill:var(--brand); margin-left:5px; }
.hero-video-overlay:hover .hero-play-btn{ transform:scale(1.1); box-shadow:0 12px 40px rgba(0,0,0,.52); }
.hero-video-label{
  margin-top:14px; color:#fff; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; opacity:.85;
  text-shadow:0 1px 4px rgba(0,0,0,.5); pointer-events:none;
}

/* Active nav state + anchor offset (dahil sticky header) */
.section{scroll-margin-top:72px}

/* Focus ring kapag naka-tab ang horizontal rails */
.rail:focus{outline:3px solid var(--ring); outline-offset:2px}

/* Über uns section */
.ueber-section{
  padding: 64px 20px 32px;
  background: #fff;
}
.ueber-inner{
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center;
}
.ueber-heading{
  font-size: clamp(38px,5vw,58px); font-weight: 900; letter-spacing: .06em;
  color: var(--ink); margin: 0 0 10px; text-transform: uppercase;
  display: inline-block;
  border-radius: 10% 30%;
  border-bottom: 3px solid var(--accent); padding-bottom: 6px;
}
.ueber-subtitle{
  color: var(--accent); font-weight: 600; font-size: 15px; margin: 0 0 18px;
}
.ueber-body{
  color: var(--ink); font-size: 15px; line-height: 1.75; margin: 0;
}
.stats-wrap{
  border-radius: 18px; overflow: hidden;
}
.stats-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #fff;
}
.stat-box{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
}
.stat-red{ background: var(--accent); }
.stat-navy{ background: #1e3a5f; }
.stat-num{
  display: block; font-size: clamp(38px,5vw,58px); font-weight: 900;
  color: #fff; line-height: 1; margin-bottom: 8px;
}
.stat-text{ font-size: clamp(26px,3.5vw,40px); }
.stat-label{
  display: block; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500;
}
@media (max-width: 880px){
  .ueber-inner{ grid-template-columns: 1fr; gap: 28px; }
}

/* Kontakt section */
.kontakt-section{
  padding: 56px 20px 0;
  background: var(--card);
}
.kontakt-inner{
  max-width: 1200px; margin-inline: auto;
}
.kontakt-heading{
  text-align: center; font-size: clamp(24px,3.5vw,38px); font-weight: 800;
  color: var(--ink); margin: 0 0 12px;
}
.kontakt-sub{
  text-align: center; color: var(--muted); font-size: 15px;
  max-width: 60ch; margin: 0 auto 36px; line-height: 1.65;
}
.kontakt-card{
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.kontakt-left{
  padding: 32px 28px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  border-left: 4px solid var(--accent);
  box-shadow: 0 8px 28px -12px rgba(0,0,0,.10);
  display: flex; flex-direction: column; gap: 22px;
  background: #fff;
}
.kontakt-right{
  padding: 32px 28px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  border-left: 4px solid #1e3a5f;
  box-shadow: 0 8px 28px -12px rgba(0,0,0,.10);
  display: flex; flex-direction: column; gap: 14px;
  background: #fff;
}
.kontakt-row{
  display: flex; align-items: flex-start; gap: 14px;
}
.k-icon{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 16px;
}
.k-icon-red{ background: var(--accent); }
.k-icon-navy{ background: #1e3a5f; }
.k-label{ font-weight: 700; font-size: 14px; margin: 0 0 4px; display: inline-block; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.k-value{ font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0; }
.kontakt-right-title{
  font-weight: 700; font-size: 15px; color: var(--accent); margin: 0 0 2px;
}
.kontakt-right-val{ font-size: 14px; color: var(--ink); margin: 0 0 8px; }
.kontakt-right-muted{ font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.kontakt-btns{ display: flex; gap: 10px; flex-wrap: wrap; }
.btn-k-filled{
  background: #1e3a5f; color: #fff; border: none;
  padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px;
  text-decoration: none; display: inline-block;
}
.btn-k-filled:hover{ background: #16304f; color: #fff; }
.btn-k-outline{
  background: transparent; color: #1e3a5f;
  border: 1.5px solid #1e3a5f;
  padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px;
  text-decoration: none; display: inline-block;
}
.btn-k-outline:hover{ background: #1e3a5f; color: #fff; }

/* Bottom 2-col cards */
.kontakt-bottom{
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 20px;
  padding-bottom: 56px; align-items: stretch;
}
.kontakt-box{
  border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 28px;
  background: #fff; box-shadow: 0 8px 28px -12px rgba(0,0,0,.08);
}
.warum-heading{
  font-size: clamp(18px,2.5vw,24px); font-weight: 900; color: var(--ink);
  margin: 0 0 6px;
}
.warum-sub{ font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.warum-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.warum-item .wi-title{ font-weight: 700; font-size: 13px; margin: 0 0 3px; display: flex; align-items: center; gap: 6px; }
.warum-item .wi-desc{ font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
.kunden-heading{ font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 18px; }
.testimonial{ margin-bottom: 16px; }
.testimonial p{ font-size: 14px; color: var(--ink); margin: 0 0 4px; line-height: 1.6; font-style: italic; }
.testimonial cite{ font-size: 12px; color: var(--muted); font-style: normal; }

@media (max-width: 880px){
  .kontakt-card{ grid-template-columns: 1fr; }
  .kontakt-bottom{ grid-template-columns: 1fr; }
}

/* Catalog fan section */
.catalog-fan-section{
  background: #fff;
  padding: 80px 20px;
  color: var(--ink);
  border-top: 1px solid rgba(15,15,15,.06);
  border-bottom: 1px solid rgba(15,15,15,.06);
}
.catalog-fan-inner{
  max-width: 1000px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center;
}
.catalog-fan-stack{
  position: relative; width: 210px; height: 314px;
  margin: auto; margin-top: -40px;
}
.fan-card{
  position: absolute; width: 100%; height: 100%;
  object-fit: cover; border-radius: 15px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  will-change: transform; backface-visibility: hidden;
}
.catalog-center{ z-index: 3; animation: homeCatalogPulse 6s ease-in-out infinite; }
.catalog-left  { z-index: 2; animation: homeCatalogSwingLeft 6s ease-in-out infinite; }
.catalog-right { z-index: 2; animation: homeCatalogSwingRight 6s ease-in-out infinite; }

@keyframes homeCatalogSwingLeft{
  0%  { transform: rotate(-15deg) translateX(-170px) scale(.95) translateZ(0); }
  50% { transform: rotate(0deg)   translateX(0)      scale(1)   translateZ(0); }
  100%{ transform: rotate(-15deg) translateX(-170px) scale(.95) translateZ(0); }
}
@keyframes homeCatalogSwingRight{
  0%  { transform: rotate(15deg) translateX(170px) scale(.95) translateZ(0); }
  50% { transform: rotate(0deg)  translateX(0)     scale(1)   translateZ(0); }
  100%{ transform: rotate(15deg) translateX(170px) scale(.95) translateZ(0); }
}
@keyframes homeCatalogPulse{
  0%  { transform: scale(1)    translateZ(0); }
  50% { transform: scale(1.02) translateZ(0); }
  100%{ transform: scale(1)    translateZ(0); }
}

.catalog-text-col h2{
  font-size: clamp(22px,3vw,34px); font-weight: 800;
  color: var(--ink); margin: 0 0 6px; position: relative; display: inline-block;
}
.catalog-text-col h2::after{
  content: ''; display: block; height: 4px; width: 48px;
  background: var(--brand); border-radius: 3px; margin-top: 6px;
}
.catalog-text-col p{
  color: var(--muted); font-size: 15px; line-height: 1.65; margin: 14px 0 24px;
}
.catalog-btns{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.cat-btn-primary{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px;
  text-decoration: none; transition: all .25s;
  background: var(--brand); border: 2px solid var(--brand); color: #fff;
  box-shadow: 0 10px 20px rgba(11,61,46,.18);
}
.cat-btn-primary:hover{ background: #0d4a38; border-color: #0d4a38; transform: translateY(-2px); color: #fff; }
.cat-btn-outline{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px;
  text-decoration: none; transition: all .25s;
  background: transparent; border: 2px solid var(--brand); color: var(--brand);
}
.cat-btn-outline:hover{ background: var(--brand); border-color: var(--brand); transform: translateY(-2px); color: #fff; }
.catalog-kontakt h3{
  font-size: clamp(18px,2.5vw,26px); font-weight: 800; color: var(--ink);
  margin: 0 0 10px; position: relative; display: inline-block;
}
.catalog-kontakt h3::after{
  content: ''; display: block; height: 3px; width: 36px;
  background: var(--brand); border-radius: 3px; margin-top: 5px;
}
.catalog-kontakt p{ color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.catalog-kontakt strong{ color: var(--ink); }
.cat-btn-video{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 10px 20px; border-radius: 10px;
  font-weight: 700; font-size: 14px; text-decoration: none; transition: all .25s;
  background: var(--brand); border: 2px solid var(--brand); color: #fff;
  box-shadow: 0 10px 20px rgba(11,61,46,.18);
}
.cat-btn-video:hover{ background: #0d4a38; border-color: #0d4a38; transform: translateY(-2px); color: #fff; }

@keyframes mobCatalogLeft{
  0%  { transform: rotate(-15deg) translateX(-28vw) scale(.95) translateZ(0); }
  50% { transform: rotate(0deg)   translateX(0)     scale(1)   translateZ(0); }
  100%{ transform: rotate(-15deg) translateX(-28vw) scale(.95) translateZ(0); }
}
@keyframes mobCatalogRight{
  0%  { transform: rotate(15deg) translateX(28vw) scale(.95) translateZ(0); }
  50% { transform: rotate(0deg)  translateX(0)    scale(1)   translateZ(0); }
  100%{ transform: rotate(15deg) translateX(28vw) scale(.95) translateZ(0); }
}
@keyframes mobCatalogPulse{
  0%  { transform: scale(1)    translateZ(0); }
  50% { transform: scale(1.02) translateZ(0); }
  100%{ transform: scale(1)    translateZ(0); }
}

@media (max-width: 880px){
  .catalog-fan-section{ padding: 56px 20px 64px; overflow-x: clip; }
  .catalog-fan-inner{
    display: block;
  }
  .catalog-fan-stack{
    display: block;
    width: 45vw; height: 67vw;
    position: relative;
    margin: 0 auto 40px;
  }
  .catalog-text-col{ display: block; }
  .catalog-center{ animation: mobCatalogPulse  6s ease-in-out infinite; }
  .catalog-left  { animation: mobCatalogLeft   6s ease-in-out infinite; }
  .catalog-right { animation: mobCatalogRight  6s ease-in-out infinite; }
  .catalog-btns{ justify-content: center; flex-direction: column; align-items: center; }
  .cat-btn-primary, .cat-btn-outline{ width: 100%; max-width: 280px; justify-content: center; }
}

/* ============================
   CONTACT INFOBAR — Fixed Right Sidebar
   ============================ */
.contact-infobar {
  position: fixed;
  right: 0;
  top: 110px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  margin: 0;
  padding: 4px 0;
}

/* Every item is an <a> — uniform expand behavior */
.contact-infobar > a {
  pointer-events: all;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 50px;
  overflow: hidden;
  height: 50px;
  border-radius: 25px 0 0 25px;
  background: rgba(255,255,255,0.95);
  padding-right: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1d3a5a;
  white-space: nowrap;
  box-shadow: -2px 2px 10px rgba(0,0,0,0.18);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
}

.contact-infobar > a:hover {
  width: 260px;
}

.contact-infobar > a > div {
  min-width: 50px;
  width: 50px;
  height: 50px;
  background: #1d3a5a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 0.25s;
}

.contact-infobar > a:hover > div {
  background: var(--accent);
}

@media (max-width: 768px) {
  .contact-infobar { display: none; }
}

/* Value props band */
.u-band{
  background: var(--card);
  border-top: 1px solid rgba(15,15,15,.06);
  border-bottom: 1px solid rgba(15,15,15,.06);
}
.u-icon{
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #1e3a5f;
  box-shadow: 0 6px 20px rgba(11,61,46,.12);
  color: #fff;
  font-size: 18px;
}

/* Value props — mobile: deeper gray background, more white space around it */
@media (max-width: 880px){
  .u-band{
    background: #d8dce1;
    border-top: none;
    border-bottom: none;
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (max-width: 991px){
  .u-band .d-flex{
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center;
  }
  .u-icon{
    width: 62px; height: 62px;
    border-radius: 16px;
    font-size: 26px;
    box-shadow: 0 8px 24px rgba(11,61,46,.16);
  }
  .u-band .fw-bold{ font-size: 13px !important; }
  .u-band .text-muted.small{ font-size: 11.5px !important; line-height: 1.5; }
}