/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  font-family:var(--font-display); font-weight:600; font-size:0.95rem;
  padding:1rem 1.8rem;
  border-radius:var(--radius-full);
  white-space:nowrap;
  transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease,
             transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium),
             border-color var(--dur-fast) ease;
}
.btn svg{ width:17px; height:17px; transition:transform var(--dur-fast) var(--ease-premium); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(0.98); }

.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:#c89a52; transform:translateY(-2px); box-shadow:var(--shadow-gold); }

.btn-ghost{ border:1.5px solid rgba(27,36,32,0.3); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--cream); transform:translateY(-2px); }

.btn-lg{ padding:1.15rem 2.2rem; font-size:1rem; }
.btn-block{ width:100%; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:100;
  padding-block:1.25rem;
  transition:background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, padding-block var(--dur-fast) ease;
}
.site-header.is-scrolled{
  background:rgba(251,248,242,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding-block:0.7rem;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:0.65rem; }
.brand-mark{ position:relative; width:32px; height:27px; flex-shrink:0; }
.brand-mark svg{ position:absolute; inset:0; width:100%; height:100%; }

.brand-text{
  font-family:var(--font-display); font-weight:800; font-size:0.98rem; letter-spacing:0.01em;
  color:var(--ink); line-height:1.2;
}
.brand-text__sub{
  display:block; font-weight:600; font-size:0.66rem; letter-spacing:0.2em;
  color:var(--gold-ink);
}

.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.navlink{
  font-family:var(--font-display); font-weight:500; font-size:0.92rem;
  color:var(--ink); transition:color var(--dur-fast) ease;
}
.navlink:hover::after{ transform:scaleX(1); transform-origin:left; }

.menu-toggle{ display:none; padding:0.5rem; }
.menu-toggle svg{ width:24px; height:24px; }
.menu-toggle svg .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] svg .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] svg .icon-close{ display:block; }
.menu-toggle path{ stroke:var(--ink); }

.mobile-menu{
  display:none; position:fixed; inset:0; z-index:99;
  background:var(--ink); padding:6.5rem 1.5rem 2.5rem;
  flex-direction:column; gap:0.5rem;
}
.mobile-menu.is-open{ display:flex; }
.mobile-menu .navlink{ color:var(--cream); font-size:1.15rem; padding-block:0.85rem; border-bottom:1px solid var(--line-cream); }
.mobile-menu .navlink::after{ display:none; }
.mobile-menu .btn{ margin-top:1.5rem; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

/* =========================================================
   SECTION FLOURISH (small logo mark above an eyebrow)
   ========================================================= */
.flourish{ width:38px; height:auto; margin-bottom:1.3rem; }
.flourish.centered{ margin-inline:auto; }

/* =========================================================
   PHOTO FRAMES
   ========================================================= */
.photo-frame{ position:relative; }
.photo-frame__border{
  position:absolute; inset:0; border:1px solid rgba(184,137,62,0.5);
  border-radius:var(--radius-lg);
  transform:translate(14px,14px);
  pointer-events:none;
}
.photo-frame__img-wrap{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/5;
}
.photo-frame__img-wrap img{ width:100%; height:100%; object-fit:cover; }
.photo-frame__img-wrap::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(195deg, rgba(44,74,59,0.1) 0%, rgba(27,36,32,0) 35%, rgba(27,36,32,0) 70%, rgba(27,36,32,0.22) 100%);
  pointer-events:none;
}

/* =========================================================
   MINI BAR GLYPH (3-bar progress indicator on service cards / tagline)
   ========================================================= */
.bar-glyph{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.bar-glyph span{ display:block; width:5px; border-radius:1px; background:var(--pine); }
.bar-glyph span:nth-child(1){ height:35%; }
.bar-glyph span:nth-child(2){ height:65%; }
.bar-glyph span:nth-child(3){ height:100%; background:var(--gold); }

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
}
@media (max-width: 900px){ .service-grid{ grid-template-columns:1fr; } }

.service-card{
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2.4rem 2rem;
  display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) ease;
}
@media (hover:hover){
  .service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:var(--gold); }
  .service-card:hover .service-card__num{ color:var(--gold); }
  .service-card:hover .bar-glyph span{ transform:scaleY(1.12); }
}
.service-card__num{
  font-family:var(--font-display); font-weight:800; font-size:2.5rem; line-height:1;
  color:var(--gold-ink); transition:color var(--dur-base) ease;
}
.service-card .bar-glyph{ margin-top:1.4rem; }
.service-card .bar-glyph span{ transition:transform var(--dur-fast) ease; transform-origin:bottom; }
.service-card__audience{ margin-top:1.1rem; font-family:var(--font-accent); font-style:italic; color:rgba(27,36,32,0.55); }
.service-card__title{ margin-top:0.4rem; font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); }
.service-card__desc{ margin-top:1.1rem; color:rgba(27,36,32,0.78); line-height:1.7; }

/* =========================================================
   VALUES — single row beneath photo + text, last row centers itself
   ========================================================= */
.ueber-mich__values{ margin-top:clamp(3.5rem, 3rem + 2vw, 5.5rem); }
.values-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
  max-width:1040px; margin-inline:auto;
}
.value-card{
  flex:1 1 220px; max-width:245px;
  background:var(--surface-2); border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), background-color var(--dur-base) ease;
}
@media (hover:hover){
  .value-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); background:var(--cream); }
  .value-card:hover .value-card__icon{ transform:scale(1.12); }
}
.value-card__icon{
  width:28px; height:28px; color:var(--gold-ink);
  transition:transform var(--dur-fast) var(--ease-premium);
}
.value-card__name{
  margin-top:0.7rem; font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--ink);
  overflow-wrap:break-word;
}
.value-card p{ margin-top:0.5rem; color:rgba(27,36,32,0.72); font-size:0.88rem; line-height:1.48; }

/* =========================================================
   FOOTER — compact, left-aligned
   ========================================================= */
.site-footer{ background:var(--ink); color:var(--cream); padding-block:2.75rem 1.5rem; text-align:left; }
.footer-main{
  padding-bottom:1.5rem; border-bottom:1px solid var(--line-cream);
  display:flex; flex-direction:column; gap:0.85rem; align-items:flex-start;
}
.footer-brand{ display:flex; align-items:center; gap:0.6rem; }
.footer-brand .brand-mark{ width:26px; height:22px; display:block; flex-shrink:0; }
.footer-brand .brand-mark img{ width:100%; height:100%; }
.footer-brand__name{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; }
.footer-address{ color:rgba(251,248,242,0.7); font-size:0.9rem; }
.footer-address a{ color:rgba(251,248,242,0.7); }
.footer-address a:hover{ color:var(--gold); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer-nav a{ font-family:var(--font-display); font-size:0.86rem; color:rgba(251,248,242,0.8); }
.footer-nav a:hover{ color:var(--gold); }
.footer-bottom{
  padding-top:1.1rem; text-align:left;
  font-size:0.78rem; color:rgba(251,248,242,0.45);
}

/* =========================================================
   MISC
   ========================================================= */
.divider-gold{ height:1px; width:64px; background:var(--gold); }