/* =========================================================
   HERO VARIANTS
   ========================================================= */

/* Common */
.hero {
  position: relative;
  padding: 160px 0 120px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__grid-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, #cfdcf1 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 80% 60% at 20% 30%, #000 40%, transparent 80%);
  opacity: 0.7;
}
.hero__glow {
  position: absolute;
  top: -100px; right: -200px;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(147,197,253,0.55), transparent 65%);
  filter: blur(10px);
}

/* Split variant */
.hero--split .hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: 28px; }
.hero__h1 { margin-top: 6px; }
.hero__em { color: var(--up-600); }
.hero__lead { max-width: 44ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }

.hero__visual { position: relative; }
.hero__photo-frame {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--up-50);
}
.hero__photo-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 6s ease;
}
.hero__photo-frame:hover img { transform: scale(1.04); }
.hero__photo-tag {
  position: absolute; left: 20px; bottom: 20px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.hero__photo-tag-name { font-family: var(--font-display); font-size: 20px; color: var(--up-900); line-height: 1; }
.hero__photo-tag-role { font-size: 12px; color: var(--ink-500); letter-spacing: 0.1em; margin-top: 6px; text-transform: uppercase; }

.hero__accent-tile {
  position: absolute;
  right: -20px; top: 40px;
  background: var(--up-900);
  color: var(--white);
  padding: 22px 26px;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform: rotate(3deg);
}
.hero__tile-num { font-family: var(--font-display); font-size: 52px; line-height: 0.9; letter-spacing: -0.03em; }
.hero__tile-num span { color: var(--up-300); }
.hero__tile-label { font-size: 12px; opacity: 0.85; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }

.hero__scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-400);
  z-index: 1;
}
.hero__scroll-line { display:block; width:1px; height: 40px; background: linear-gradient(to bottom, var(--ink-300), transparent); animation: hintPulse 2s ease-in-out infinite; }
@keyframes hintPulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

@media (max-width: 960px) {
  .hero { padding: 110px 0 80px; }
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__accent-tile {
    top: auto;
    bottom: 100px;
    right: 12px;
    transform: rotate(2deg);
    padding: 16px 20px;
  }
  .hero__tile-num { font-size: 38px; }
  .hero__tile-label { font-size: 10px; }
}

/* Editorial variant */
.hero--editorial { padding: 160px 0 100px; }
.hero-ed__h1 { font-size: clamp(64px, 11vw, 180px); line-height: 0.92; margin-top: 32px; }
.hero-ed__h1 em { font-style: italic; color: var(--up-700); }
.hero-ed__body { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 80px; align-items: end; }
.hero-ed__photo { aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-ed__photo img { width:100%; height:100%; object-fit: cover; }
.hero-ed__col { display: flex; flex-direction: column; }
.hero-ed__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 60px; border-top: 1px solid var(--ink-200); padding-top: 28px; }
.hero-ed__stats > div { display: flex; flex-direction: column; gap: 6px; }
.hero-ed__stats strong { font-family: var(--font-display); font-size: 44px; color: var(--up-900); font-weight: 400; line-height: 1; }
.hero-ed__stats span { font-size: 12px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 860px) {
  .hero-ed__body { grid-template-columns: 1fr; }
  .hero-ed__stats { grid-template-columns: repeat(2, 1fr); }
}

/* Minimal variant */
.hero--minimal { padding: 170px 0 80px; background: linear-gradient(180deg, var(--paper), #f1f6fd); }
.hero-min__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.hero-min__left { display: flex; flex-direction: column; gap: 24px; }
.hero-min__right { position: relative; aspect-ratio: 3/4; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-min__right img { width: 100%; height: 100%; object-fit: cover; }
.hero-min__badges { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero-min__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   NUMBERS
   ========================================================= */
.numbers { background: linear-gradient(180deg, var(--paper) 0%, #eef4fc 100%); }
.numbers__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 60px; gap: 32px; flex-wrap: wrap; }
.numbers__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.num-card {
  padding: 28px 24px;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative; overflow: hidden;
}
.num-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--up-200); }
.num-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--up-50); color: var(--up-700); display: inline-flex; align-items: center; justify-content: center; }
.num-card__icon svg { width: 22px; height: 22px; }
.num-card__num { font-family: var(--font-display); font-size: 58px; font-weight: 400; color: var(--up-900); line-height: 0.9; letter-spacing: -0.03em; }
.num-card__label { font-size: 14px; color: var(--ink-600); line-height: 1.4; }
.numbers__note { font-size: 12px; color: var(--ink-400); margin-top: 24px; }
@media (max-width: 1100px) { .numbers__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .numbers__grid { grid-template-columns: repeat(2, 1fr); } .num-card__num { font-size: 44px; } }

/* =========================================================
   SERVICES — variants: cards / tabs / list
   ========================================================= */
.services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 72px; align-items: end; }
.services__head p { color: var(--ink-600); font-size: 17px; line-height: 1.6; }
@media (max-width: 800px) { .services__head { grid-template-columns: 1fr; } }

/* Cards layout */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 22px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.3s ease;
  position: relative; overflow: hidden;
}
.svc-card::before {
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--up-400), var(--up-800));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }
.svc-card__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--up-50); color: var(--up-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.svc-card__icon svg { width: 28px; height: 28px; }
.svc-card__kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--up-600); margin-bottom: 10px; }
.svc-card h3 { font-family: var(--font-display); font-size: 30px; line-height: 1; margin-bottom: 18px; }
.svc-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.svc-card li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-700); line-height: 1.5; }
.svc-card li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--up-500); }
.svc-card__badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: linear-gradient(135deg, rgba(30,58,138,0.07), rgba(37,99,235,0.1)); border: 1.5px solid var(--up-300); color: var(--up-800); font-size: 13px; font-weight: 600; border-radius: 10px; margin-bottom: 20px; }
.svc-card__badge svg { width: 16px !important; height: 16px !important; flex: none; }
.svc-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--up-900); padding: 10px 0; border-top: 1px solid var(--ink-100); padding-top: 18px; }
.svc-card__more svg { width: 18px !important; height: 18px !important; flex: none; transition: transform 0.3s; }
.svc-card__more:hover svg { transform: translateX(4px); }

@media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr; } }

/* Tabs layout */
.svc-tabs { background: var(--white); border: 1px solid var(--ink-100); border-radius: 24px; overflow: hidden; }
.svc-tabs__bar { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--ink-100); }
.svc-tabs__btn { padding: 24px 28px; text-align: left; border-right: 1px solid var(--ink-100); transition: background 0.2s, color 0.2s; position: relative; }
.svc-tabs__btn:last-child { border-right: 0; }
.svc-tabs__btn strong { display:block; font-family: var(--font-display); font-size: 22px; color: var(--ink-900); font-weight: 400; margin-bottom: 4px; }
.svc-tabs__btn span { font-size: 13px; color: var(--ink-500); }
.svc-tabs__btn.active { background: var(--up-50); color: var(--up-900); }
.svc-tabs__btn.active strong { color: var(--up-900); }
.svc-tabs__btn.active::after { content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--up-700); }
.svc-tabs__body { padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.svc-tabs__body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.svc-tabs__body li { display:flex; gap: 12px; font-size: 15px; color: var(--ink-700); }
.svc-tabs__body li svg { flex: none; width: 18px; height: 18px; color: var(--up-600); margin-top: 3px; }
.svc-tabs__side { background: var(--up-50); padding: 32px; border-radius: 16px; display:flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) {
  .svc-tabs__bar { grid-template-columns: 1fr; }
  .svc-tabs__btn { border-right: 0; border-bottom: 1px solid var(--ink-100); }
  .svc-tabs__body { padding: 28px; grid-template-columns: 1fr; }
}

/* List layout */
.svc-list { display: flex; flex-direction: column; border-top: 1px solid var(--ink-200); }
.svc-list__row { display: grid; grid-template-columns: 100px 1fr 1.3fr 180px; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--ink-200); align-items: center; transition: background 0.3s; }
.svc-list__row:hover { background: var(--up-50); margin: 0 -20px; padding: 36px 20px; }
.svc-list__row .num { font-family: var(--font-display); font-size: 40px; color: var(--up-200); }
.svc-list__row h3 { font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; }
.svc-list__row p { font-size: 15px; color: var(--ink-600); line-height: 1.5; }
.svc-list__row .btn { justify-self: end; }
@media (max-width: 860px) {
  .svc-list__row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .svc-list__row .btn { justify-self: start; }
}

/* =========================================================
   ACCORDION (details)
   ========================================================= */
.detail { max-width: 980px; margin: 56px auto 0; border-top: 1px solid var(--ink-100); }
.detail__item { border-bottom: 1px solid var(--ink-100); }
.detail__head { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 24px 0; text-align: left; }
.detail__head h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--ink-900); line-height: 1.1; }
.detail__head span { color: var(--ink-400); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.detail__plus { width: 36px; height: 36px; border-radius: 999px; background: var(--up-50); color: var(--up-800); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s, background 0.2s; }
.detail__item[open] .detail__plus { transform: rotate(45deg); background: var(--up-700); color: var(--white); }
.detail__body { padding: 0 0 32px; color: var(--ink-600); font-size: 15px; line-height: 1.65; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.detail__body h4 { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--up-700); margin: 16px 0 10px; font-weight: 500; }
.detail__body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.detail__body li { display: flex; gap: 10px; }
.detail__body li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--up-500); }
.detail__meta { background: var(--up-50); padding: 24px; border-radius: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.detail__meta strong { color: var(--up-900); }
@media (max-width: 860px) {
  .detail__body { grid-template-columns: 1fr; gap: 20px; }
}

/* =========================================================
   AVGS
   ========================================================= */
.avgs { background: linear-gradient(180deg, #eaf2fb 0%, #dbe9f8 100%); position: relative; overflow: hidden; }
.avgs::before {
  content:""; position: absolute; top: -100px; left: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%);
}
.avgs__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.avgs__head h2 { margin-top: 18px; max-width: 14ch; }
.avgs__head p { margin-top: 28px; max-width: 46ch; color: var(--ink-700); font-size: 18px; line-height: 1.55; }
.avgs__steps { display: flex; flex-direction: column; gap: 20px; margin-top: 42px; }
.avgs__step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 22px; background: rgba(255,255,255,0.7); border-radius: 16px; border: 1px solid rgba(255,255,255,0.9); backdrop-filter: blur(8px); }
.avgs__step__num { width: 44px; height: 44px; border-radius: 12px; background: var(--up-900); color: var(--white); display:inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; }
.avgs__step h4 { font-family: var(--font-display); font-size: 20px; font-weight: 400; margin-bottom: 6px; }
.avgs__step p { color: var(--ink-600); font-size: 14px; line-height: 1.5; }
.avgs__form { background: var(--white); border-radius: 24px; padding: 40px; box-shadow: var(--shadow-lg); }
.avgs__form h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin-bottom: 8px; }
.avgs__form p.small { font-size: 14px; color: var(--ink-500); margin-bottom: 24px; }
.avgs__upload { padding: 18px; border: 1.5px dashed var(--ink-200); border-radius: 12px; display:flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.avgs__upload:hover { border-color: var(--up-500); background: var(--up-50); }
.avgs__upload svg { color: var(--up-700); }
.avgs__upload__txt { font-size: 13px; color: var(--ink-500); }
.avgs__upload__txt strong { color: var(--ink-800); display: block; font-weight: 500; font-size: 14px; }
.avgs__note { font-size: 13px; color: var(--ink-600); margin-top: 20px; background: var(--up-50); padding: 14px 16px; border-radius: 10px; border-left: 3px solid var(--up-600); }
@media (max-width: 960px) { .avgs__inner { grid-template-columns: 1fr; } }

/* =========================================================
   ÜBER MICH — variants
   ========================================================= */
/* Portrait variant */
.about { }
.about--portrait .about__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.about__photo { position: relative; }
.about__photo > img { aspect-ratio: 3/4; object-fit: cover; width:100%; border-radius: 24px; box-shadow: var(--shadow-lg); }
.about__photo img.about__badge-img {
  position: absolute; right: -28px; bottom: -28px;
  width: 170px; height: 170px;
  aspect-ratio: 1;
  border-radius: 999px;
  object-fit: contain;
  background: var(--white);
  padding: 14px;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--white);
}
.about__badge {
  position: absolute; right: -30px; bottom: -30px;
  width: 180px; height: 180px; border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
}
.about__badge svg { width: 160px; height: 160px; }
.about__text .eyebrow { margin-bottom: 18px; }
.about__text h2 { margin-bottom: 28px; }
.about__text p { color: var(--ink-700); font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.about__milestones { margin-top: 36px; border-left: 2px solid var(--up-200); padding-left: 24px; display: flex; flex-direction: column; gap: 16px; }
.about__milestone { display: grid; grid-template-columns: 130px 1fr; gap: 16px; font-size: 14px; color: var(--ink-700); align-items: start; position: relative; }
.about__milestone::before { content: ""; position: absolute; left: -32px; top: 7px; width: 10px; height: 10px; border-radius: 999px; background: var(--up-600); }
.about__milestone strong { color: var(--up-900); font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.about__langs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.about__lang { padding: 10px 16px; border: 1px solid var(--up-200); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--up-800); background: var(--up-50); display:inline-flex; align-items: center; gap: 8px; }
.about__cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 960px) { .about--portrait .about__inner { grid-template-columns: 1fr; } .about__badge, .about__photo img.about__badge-img { right: 10px; bottom: 10px; width: 120px; height: 120px; } }

/* Editorial variant */
.about--ed .about__inner { display: grid; grid-template-columns: 1fr; }
.about--ed h2 { font-size: clamp(44px, 8vw, 120px); line-height: 0.95; margin-bottom: 48px; }
.about--ed__split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: end; }
.about--ed__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about--ed__photos img { aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; }
.about--ed__photos img:nth-child(2) { transform: translateY(32px); }
.about--ed__quote { font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 32px); font-weight: 400; line-height: 1.3; margin-top: 40px; }
.about--ed__quote em { color: var(--up-700); font-style: italic; }
@media (max-width: 860px) { .about--ed__split { grid-template-columns: 1fr; } }

/* =========================================================
   ABLAUF (timeline)
   ========================================================= */
.ablauf { }
.ablauf__timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 72px; position: relative; }
.ablauf__timeline::before { content:""; position: absolute; top: 28px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--up-300), var(--up-600), var(--up-300), transparent); z-index: 0; }
.ablauf__step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding-right: 20px; }
.ablauf__dot { width: 56px; height: 56px; background: var(--white); border: 2px solid var(--up-700); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--up-700); font-family: var(--font-display); font-size: 20px; transition: background 0.3s, color 0.3s; }
.ablauf__step:hover .ablauf__dot { background: var(--up-700); color: var(--white); }
.ablauf__step h4 { font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1.1; }
.ablauf__step p { font-size: 14px; color: var(--ink-600); line-height: 1.5; }
@media (max-width: 860px) {
  .ablauf__timeline { grid-template-columns: 1fr; gap: 24px; }
  .ablauf__timeline::before { display: none; }
}

/* =========================================================
   WARUM grid
   ========================================================= */
.warum__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-100); border: 1px solid var(--ink-100); border-radius: 20px; overflow: hidden; margin-top: 64px; }
.warum__card { background: var(--white); padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; transition: background 0.3s; }
.warum__card:hover { background: var(--up-50); }
.warum__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--up-50); color: var(--up-700); display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s; }
.warum__card:hover .warum__icon { background: var(--up-700); color: var(--white); }
.warum__icon svg { width: 24px; height: 24px; }
.warum__card h4 { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.1; }
.warum__card p { font-size: 14px; color: var(--ink-600); line-height: 1.55; }
@media (max-width: 860px) { .warum__grid { grid-template-columns: 1fr; } }

/* =========================================================
   FAQ
   ========================================================= */
.faq { }
.faq__grid { max-width: 880px; margin: 64px auto 0; }
.faq__item { border-top: 1px solid var(--ink-200); }
.faq__item:last-child { border-bottom: 1px solid var(--ink-200); }
.faq__head { width: 100%; padding: 24px 0; text-align: left; display: grid; grid-template-columns: 28px 1fr 32px; gap: 16px; align-items: center; transition: color 0.2s; }
.faq__head:hover { color: var(--up-900); }
.faq__head .idx { font-family: var(--font-display); font-size: 14px; color: var(--up-600); }
.faq__head h4 { font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1.2; }
.faq__plus { color: var(--up-700); transition: transform 0.3s; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__body { padding: 0 0 28px 44px; font-size: 15px; line-height: 1.7; color: var(--ink-600); }

/* =========================================================
   CONTACT — variants
   ========================================================= */
.contact--split .contact__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
.contact--split .contact__inner > * { min-width: 0; }
.contact__left h2 { margin-bottom: 24px; }
.contact__form-wrap { background: var(--white); border-radius: 24px; padding: 40px; box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100); box-sizing: border-box; width: 100%; }
.contact--split .contact__form-wrap { padding: 48px; }

/* Compact variant */
.contact--compact { background: linear-gradient(180deg, var(--up-900) 0%, var(--up-950) 100%); color: var(--white); }
.contact--compact .h-section { color: var(--white); }
.contact--compact .lead { color: rgba(255,255,255,0.8); }
.contact--compact .contact__inner { display: grid; grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; align-items: center; }
.contact--compact .eyebrow { color: var(--up-300); justify-content: center; display: inline-flex; margin: 0 auto; }
.contact--compact .eyebrow::before { background: var(--up-300); }
.contact--compact .lead { margin: 24px auto 40px; }
.contact--compact .contact__form-wrap { text-align: left; padding: 40px; background: var(--white); color: var(--ink-900); border-radius: 20px; }

.contact__info { display: flex; flex-direction: column; gap: 28px; }
.contact__info-row { display: flex; gap: 16px; align-items: flex-start; }
.contact__info-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--up-50); color: var(--up-700); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.contact__info-row h5 { font-size: 12px; color: var(--ink-500); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }
.contact__info-row a, .contact__info-row p { font-size: 17px; color: var(--ink-900); font-weight: 500; }
.contact__hours { margin-top: 12px; padding: 16px; background: var(--up-50); border-radius: 12px; font-size: 13px; color: var(--ink-600); line-height: 1.55; border-left: 3px solid var(--up-600); }

@media (max-width: 960px) {
  .contact--split .contact__inner { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 768px) {
  .contact--split .contact__inner { gap: 28px !important; }
  .contact--split .contact__form-wrap,
  .contact--compact .contact__form-wrap { padding: 20px !important; }
  .contact__info-row a,
  .contact__info-row p { font-size: 15px; word-break: break-word; overflow-wrap: anywhere; }
}

/* Thank-you */
.thankyou { text-align: center; padding: 40px 20px; }
.thankyou__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--up-50); color: var(--up-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.thankyou__icon svg { width: 32px; height: 32px; }
.thankyou h3 { font-family: var(--font-display); font-size: 32px; font-weight: 400; margin-bottom: 12px; }
.thankyou p { color: var(--ink-600); max-width: 40ch; margin: 0 auto; }

/* Tweaks panel */
.tweaks {
  position: fixed; right: 20px; bottom: 20px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-100);
  z-index: 70;
  width: 320px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-size: 13px;
}
.tweaks__head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink-100); }
.tweaks__head strong { font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.tweaks__body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.tweaks__grp > label { display:block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-500); margin-bottom: 10px; }
.tweaks__opts { display: grid; grid-template-columns: 1fr; gap: 6px; }
.tweaks__opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ink-100); cursor: pointer; transition: all 0.2s; }
.tweaks__opt:hover { border-color: var(--up-300); }
.tweaks__opt.active { background: var(--up-50); border-color: var(--up-700); color: var(--up-900); font-weight: 500; }
.tweaks__opt .dot { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--ink-300); flex:none; position: relative; }
.tweaks__opt.active .dot { border-color: var(--up-700); }
.tweaks__opt.active .dot::after { content:""; position: absolute; inset: 2px; background: var(--up-700); border-radius: 999px; }