/* ============================================================
   ELANI LOGOPÄDIE v10 — page.css
   Mobile-first. Tested breakpoints: 375 / 480 / 768 / 1024 / 1280
   ============================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOME HERO — full-width photo, text overlay, no split boxes
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.home-hero {
  position: relative;
  min-height: clamp(480px, 75vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Background image layer */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Gradient overlay: dark at bottom for text legibility, subtle at top */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(30,51,40,0.08) 0%,
      rgba(30,51,40,0.15) 35%,
      rgba(30,51,40,0.72) 75%,
      rgba(20,40,28,0.88) 100%
    );
}

/* Content sits above overlay */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(2rem,5vw,4rem) 0 clamp(2.5rem,5vw,4.5rem);
}

/* Text card — left-aligned, max readable width, no box/card background */

.hero-text-card .eyebrow {
  color: #fff !important;              /* beat global .eyebrow coral color */
  background: rgba(30,51,40,0.65);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-block !important;
  padding: .32rem .9rem;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none !important;     /* no allcaps — easier to read */
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.hero-text-card h1 {
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero-text-card h1 em {
  font-style: italic;
  color: var(--gold);
}
.hero-sub {
  font-size: clamp(.93rem,1.8vw,1.08rem);
  color: rgba(255,255,255,.88);
  margin-bottom: .85rem;
  max-width: 520px;
  line-height: 1.65;
}
/* .hero-hint removed */
.hero-btns {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
}
/* Outline button on dark bg */
.btn-hero-outline {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  backdrop-filter: blur(4px);
  font-family: var(--font-b);
  font-weight: 700;
  font-size: .9rem;
  padding: .8rem 1.8rem;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.85);
  color: #fff;
  transform: translateY(-2px);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .home-hero { min-height: clamp(440px, 90vw, 580px); align-items: flex-end; }
  .hero-bg img { object-position: 55% 20%; }
  /* Stronger overlay on mobile for text legibility */
  .hero-bg-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(20,40,28,0.25) 0%,
        rgba(20,40,28,0.65) 45%,
        rgba(15,35,22,0.95) 100%
      );
  }
  .hero-text-card { max-width: 100%; }
  .hero-text-card h1 { font-size: 1.65rem; }
  .hero-sub { font-size: .9rem; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn,
  .hero-btns .btn-hero-outline { text-align: center; justify-content: center; width: 100%; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESKTOP hero: side-by-side, photo fills right half
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 900px) {
  .home-hero {
    flex-direction: row;
    min-height: clamp(560px, 88vh, 900px);
  }
  
  
  
  /* Desktop: soft left-side fade only */
  
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOME FEATURES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .features { grid-template-columns: repeat(3,1fr); } }

.feat-card {
  background: var(--cream);
  border-radius: var(--r);
  padding: 1.4rem;
  border-top: 3px solid transparent;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.feat-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--sage);
  box-shadow: var(--sh-lg);
}
.feat-card .icon { margin-bottom: .85rem; }
.feat-card h3 { color: var(--forest-dk); margin-bottom: .4rem; font-size: 1rem; }
.feat-card p { font-size: .88rem; margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOME ABOUT TEASER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.at-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .at-grid { grid-template-columns: 1fr 1fr; align-items: center; } }

.at-text h2 { margin-bottom: .85rem; }
.at-text .btn { margin-top: 1rem; }

.qual-list { display: flex; flex-direction: column; gap: .7rem; }
.qual-item { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; color: var(--text-mid); }
.qi-chk {
  width: 24px; height: 24px; min-width: 24px;
  background: var(--sage-lt); color: var(--forest);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: .1rem;
}
.qi-chk svg { width: 12px; height: 12px; stroke: var(--forest); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOME SERVICES PREVIEW
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 600px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-card {
  background: var(--cream);
  border-radius: var(--r);
  padding: 1rem .85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  min-height: 0;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
  border-color: var(--sage-lt);
}
.svc-card .icon { flex-shrink: 0; }
.svc-card h3 { font-size: .86rem; color: var(--forest-dk); margin: 0; line-height: 1.3; }
.svc-card p  { font-size: .73rem; color: var(--text-lt); margin: 0; line-height: 1.4; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA BANNER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-band {
  background: linear-gradient(135deg, var(--forest-dk) 0%, var(--forest) 100%);
  padding: clamp(3rem,6vw,5rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(242,197,124,.12) 0%, transparent 65%);
  pointer-events: none;
}
.cta-in {
  position: relative; z-index: 1;
  padding: 0 clamp(1rem,4vw,2rem);
  max-width: 640px;
  margin: 0 auto;
}
.cta-in h2 { color: #fff; margin-bottom: .85rem; }
.cta-in p  { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: 1.8rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ÜBER MICH
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-intro {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 2.5rem;
}
.about-lower {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .about-lower {
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
  }
}

.about-photo-col { position: relative; }
.about-photo-col img {
  width: 100%;
  max-width: 260px;
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  display: block;
}
@media (max-width: 767px) {
  .about-photo-col img { max-width: 220px; margin: 0 auto; }
  .about-photo-col { text-align: center; }
}
.about-photo-col::before {
  content: '';
  position: absolute;
  top: -10px; left: -10px;
  right: 10px; bottom: 10px;
  border: 2px solid var(--gold);
  border-radius: var(--r);
  z-index: -1;
  opacity: .55;
}
.qb-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; justify-content: center; }
@media (min-width: 768px) { .qb-list { justify-content: flex-start; } }
.qb {
  background: var(--sage-lt);
  color: var(--forest-dk);
  font-size: .74rem;
  font-weight: 700;
  padding: .28rem .7rem;
  border-radius: 50px;
  white-space: nowrap;
}

/* Timeline */
.timeline { position: relative; padding-left: 1.8rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--sage-lt);
}
.tl-item { position: relative; margin-bottom: 1.6rem; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -1.8rem; top: .3rem;
  width: 13px; height: 13px;
  background: var(--sage);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--sage);
}
.tl-dot-gold { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.tl-year {
  display: block;
  font-size: .7rem; font-weight: 700;
  color: var(--coral);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.tl-item h3 { font-size: .95rem; color: var(--forest-dk); margin-bottom: .12rem; }
.tl-item p  { font-size: .85rem; margin: 0; }
.tl-hi {
  background: var(--gold-lt);
  border-radius: var(--r-sm);
  padding: .6rem .9rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEISTUNGEN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lst-list { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.5rem; }
.lst-card {
  background: #fff;
  border-radius: var(--r);
  padding: 1.2rem;
  box-shadow: var(--sh);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: .9rem;
  align-items: start;
  border-left: 3px solid transparent;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.lst-card:hover { border-left-color: var(--sage); transform: translateX(3px); box-shadow: var(--sh-lg); }
.lst-card h3 { color: var(--forest-dk); margin-bottom: .3rem; font-size: .97rem; }
.lst-card p  { font-size: .87rem; margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPEZIALISIERUNG — completely rewritten for clean UX
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .sp-grid { grid-template-columns: 1fr 1fr; } }

.sp-card {
  border-radius: var(--r);
  padding: clamp(1.3rem,3vw,2rem);
  box-shadow: var(--sh);
}
.sp-green { background: var(--sage-lt); }
.sp-gold  { background: var(--gold-lt); }
.sp-card .icon { margin-bottom: .85rem; }
.sp-card h3 { color: var(--forest-dk); margin-bottom: .65rem; }
.sp-card p  { font-size: .9rem; }

/* CI: was/wasn't do boxes */
.sp-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) { .sp-info-grid { grid-template-columns: 1fr 1fr; } }

.sp-info-box {
  border-radius: var(--r);
  padding: clamp(1.2rem,2.5vw,1.8rem);
}
.sp-info-box h3 { font-size: .95rem; color: var(--forest-dk); margin-bottom: .9rem; }
.sp-do   { background: var(--cream); }
.sp-dont { background: var(--gold-lt); }

.sp-checklist { display: flex; flex-direction: column; gap: .75rem; }
.sp-check-item { display: flex; align-items: flex-start; gap: .7rem; font-size: .88rem; color: var(--text-mid); }
.sp-check-item .icon { flex-shrink: 0; margin-top: .05rem; }

/* Phases */
.phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .phases { grid-template-columns: repeat(3,1fr); } }

.ph-card {
  text-align: center;
  padding: 1.4rem 1rem;
  background: var(--cream);
  border-radius: var(--r);
}
.ph-num {
  width: 44px; height: 44px;
  background: var(--forest);
  color: #fff;
  font-family: var(--font-h);
  font-size: 1.25rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .9rem;
}
.ph-card h4 { color: var(--forest-dk); font-size: .9rem; margin-bottom: .35rem; }
.ph-card p  { font-size: .83rem; margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.faq-intro { max-width: 640px; margin: 0 auto clamp(1.5rem,3vw,2.5rem); text-align: center; }

.faq-cats {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
}
.faq-cat-btn {
  background: var(--cream);
  border: 1.5px solid rgba(66,106,90,.2);
  color: var(--text-mid);
  border-radius: 50px;
  padding: .42rem 1rem;
  font-size: .81rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.faq-cat-btn:hover, .faq-cat-btn.active { background: var(--forest); color: #fff; border-color: var(--forest); }

.faq-section { margin-bottom: 1.8rem; }
.faq-section-hd { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.faq-section-title {
  font-family: var(--font-b);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral); margin: 0;
}
.faq-list { display: flex; flex-direction: column; gap: .45rem; }
.faq-item { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  padding: clamp(.85rem,2vw,1.15rem) clamp(.9rem,2.5vw,1.3rem);
  font-family: var(--font-h);
  font-size: clamp(.85rem,1.8vw,.97rem);
  color: var(--forest-dk);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: .85rem;
  transition: background var(--t);
  line-height: 1.35;
}
.faq-q:hover { background: var(--cream); }
.faq-item.open .faq-q { background: var(--sage-lt); }
.faq-arrow {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-lt);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, background .3s;
}
.faq-arrow svg { width: 12px; height: 12px; stroke: var(--forest); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.faq-item.open .faq-arrow { background: var(--forest); }
.faq-item.open .faq-arrow svg { stroke: #fff; transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a-inner { padding: .15rem clamp(.9rem,2.5vw,1.3rem) clamp(.85rem,2vw,1.15rem); }
.faq-a-inner p, .faq-a-inner ul { font-size: .88rem; color: var(--text-mid); }
.faq-a-inner ul { padding-left: 1.3rem; list-style: disc; margin-bottom: .6rem; }
.faq-a-inner ul li { margin-bottom: .2rem; }
.faq-cta {
  text-align: center;
  padding: clamp(1.4rem,3vw,2rem);
  background: var(--cream);
  border-radius: var(--r);
  margin-top: 1.8rem;
}
.faq-cta p { margin-bottom: 1rem; font-size: .97rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KONTAKT — map left, form right, NO sticky (breaks mobile)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.k-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 768px) {
  .k-grid { grid-template-columns: 1fr 1.5fr; gap: 2.5rem; }
}

.k-info h3, .k-form-wrap h3 {
  color: var(--forest-dk);
  margin-bottom: 1.1rem;
  font-size: 1.05rem;
}
.k-items { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.3rem; }
.k-item { display: flex; gap: .7rem; align-items: flex-start; }
.k-item .icon { flex-shrink: 0; margin-top: .05rem; }
.k-item strong {
  display: block;
  font-size: .71rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--forest);
  margin-bottom: .08rem;
}
.k-item p, .k-item a { font-size: .87rem; margin: 0; color: var(--text-mid); line-height: 1.5; }
.k-item a:hover { color: var(--coral); }

/* Map — clean, no scrollbar, fixed height */
.map-wrap {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh);
  line-height: 0;
  background: var(--sage-lt);
}
.map-wrap iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: none;
}
.maps-placeholder {
  border-radius: var(--r);
  background: var(--sage-lt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 2rem 1.25rem;
  text-align: center;
  min-height: 200px;
}
.maps-placeholder p { font-size: .83rem; color: var(--forest); margin: 0; max-width: 280px; line-height: 1.5; }
.mp-icon { font-size: 2rem; line-height: 1; }
.mp-btn {
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .5rem 1.15rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t);
  font-family: inherit;
}
.mp-btn:hover { background: var(--forest-dk); }
.mp-note { font-size: .72rem; color: var(--text-lt); }
.mp-note a { color: var(--forest); }
.map-note { font-size: .71rem; color: var(--text-lt); margin-top: .4rem; font-style: italic; }

/* Form card — NO sticky (blocks checkbox on mobile) */
.k-form-wrap {
  background: #fff;
  border-radius: var(--r);
  padding: clamp(1.25rem,3vw,2rem);
  box-shadow: var(--sh);
  /* position:static intentionally — sticky caused checkbox to be unclickable */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOBAL styles.css OVERRIDES for fg-check
   Checkbox fix: ensure nothing blocks click target
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fg-check {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: .65rem !important;
  position: relative;
  z-index: 1;          /* ensure above any pseudo-elements */
}
.fg-check input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  flex-shrink: 0 !important;
  margin-top: .1rem !important;
  accent-color: var(--forest);
  cursor: pointer;
  position: relative;
  z-index: 2;          /* above label, above card ::before */
  opacity: 1 !important;
  pointer-events: auto !important;
}
.fg-check label {
  font-size: .8rem;
  font-weight: 400;
  color: var(--text-mid);
  cursor: pointer;
  line-height: 1.55;
}

/* ── Mobile svc-grid: 2 columns always, clean alignment ── */
@media (max-width: 480px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
  }
  .svc-card {
    padding: .85rem .7rem;
  }
  .svc-card h3 { font-size: .8rem; }
  .svc-card p  { display: none; } /* hide subtitle on very small screens */
  .svc-card .icon {
    width: 36px; height: 36px;
  }
  .svc-card .icon svg {
    width: 16px; height: 16px;
  }
}

/* hint icon — never wraps away from text */
/* .hint-icon removed */


@media (max-width: 480px) {
  /* .hero-hint removed */
}