/* Hainberg Digital — component styles. Values come from tokens.css; nothing here re-declares a token. */

body { font-family: var(--font-sans); color: var(--ink); background: var(--surface-100); -webkit-font-smoothing: antialiased; }

/* ---------- Eyebrow ---------- */
.hd-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.hd-eyebrow--accent { color: var(--accent-text); }

/* ---------- Accent serif inside a headline ---------- */
.hd-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.hd-condensed { font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- Button ---------- */
.hd-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.hd-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hd-btn:active { transform: translateY(1px); }
.hd-btn--primary { background: var(--brand); color: var(--on-brand); }
.hd-btn--accent { background: var(--accent); color: var(--on-accent); }
.hd-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.hd-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.hd-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.hd-btn .hd-arrow { font-size: 1.15em; line-height: 1; }

/* ---------- Wordmark ---------- */
.hd-wordmark { display: inline-flex; align-items: baseline; gap: .18em; color: var(--ink); line-height: 1; white-space: nowrap; }
.hd-wordmark b { font-family: var(--font-display); font-weight: 900; letter-spacing: -.045em; }
.hd-wordmark i { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; }
.hd-wordmark .hd-dot { color: var(--tangerine); font-family: var(--font-display); font-weight: 900; font-style: normal; margin-left: -.14em; }

/* ---------- Social Post (4:5) ---------- */
.hd-post { position: relative; aspect-ratio: 4 / 5; width: 100%; padding: 7%; box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--radius-none); overflow: hidden; container-type: inline-size; }
.hd-post__head { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 3cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hd-post__title { margin: auto 0 0; font-family: var(--font-display); font-weight: 900; font-size: 15cqw; line-height: .9; letter-spacing: -.05em; }
.hd-post__title .hd-serif { letter-spacing: -.03em; }
.hd-post__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6cqw; font-size: 3.4cqw; line-height: 1.3; font-weight: 500; }
.hd-post__arrow { font-size: 8cqw; line-height: .8; }
.hd-post--paper { background: var(--paper); color: var(--charcoal); }
.hd-post--paper .hd-post__arrow { color: var(--charcoal); }
.hd-post--charcoal { background: var(--charcoal); color: var(--paper); }
.hd-post--charcoal .hd-hl { color: var(--tangerine); }
.hd-post--royal { background: var(--royal); color: var(--on-royal); }
.hd-post--royal .hd-hl { color: var(--paper); }
.hd-post--glow { background: radial-gradient(120% 80% at 50% 110%, var(--tangerine) 0%, rgba(254,133,0,0) 60%), var(--charcoal); color: var(--paper); }

/* ---------- Service Card ---------- */
.hd-service { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface-200); border-radius: var(--radius-md); color: var(--ink); min-height: 200px; box-sizing: border-box; }
.hd-service__num { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--accent-text); }
.hd-service__name { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.hd-service__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.hd-service__more { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.hd-service--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
.hd-service--inverse .hd-service__text { color: var(--ink-inverse); opacity: .78; }
.hd-service--inverse .hd-service__num { color: var(--ink-inverse); }

/* ---------- Nav ---------- */
.hd-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) 0; }
.hd-nav__logo img { display: block; height: 32px; width: auto; }
.hd-nav__links { display: flex; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.hd-nav__links a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.hd-nav__links a:hover { color: var(--brand); }
.hd-nav__logo .hd-logo--inverse { display: none; }
[data-theme="dark"] .hd-nav__logo .hd-logo--default { display: none; }
[data-theme="dark"] .hd-nav__logo .hd-logo--inverse { display: block; }

/* ---------- Hero ---------- */
.hd-hero { background: var(--surface-100); color: var(--ink); }
.hd-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-8); }
.hd-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-12); align-items: stretch; padding: var(--space-16) 0 var(--space-16); }
.hd-hero__copy { display: flex; flex-direction: column; justify-content: center; }
.hd-hero__title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(52px, 7.4vw, 104px); line-height: .9; letter-spacing: -.05em; }
.hd-hero__title .hd-serif { letter-spacing: -.03em; }
.hd-hero__lead { margin: var(--space-8) 0 0; max-width: 34ch; font-size: 20px; line-height: 1.45; color: var(--ink-muted); }
.hd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hd-hero__note { margin-top: var(--space-4); font-size: 14px; color: var(--ink-muted); }
.hd-hero__visual { position: relative; min-height: 520px; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(90% 60% at 70% 115%, var(--royal) 0%, rgba(16,91,255,0) 70%), var(--charcoal); }
.hd-hero__visual svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; }
.hd-hero__visual .h-paper { fill: var(--paper); } .hd-hero__visual .h-royal { fill: var(--royal); } .hd-hero__visual .h-tang { fill: var(--tangerine); }
.hd-hero__label { position: absolute; top: var(--space-6); left: var(--space-6); right: var(--space-6); display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.hd-chip { position: absolute; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); background: var(--paper); color: var(--charcoal); border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); font-size: 14px; line-height: 1.25; }
.hd-chip b { display: block; font-weight: 700; }
.hd-chip span { color: var(--charcoal); opacity: .72; }
.hd-chip i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); font-style: normal; font-weight: 700; }
.hd-chip--a { top: 22%; left: var(--space-6); } .hd-chip--a i { background: var(--royal); color: var(--on-royal); }
.hd-chip--b { top: 40%; right: var(--space-6); } .hd-chip--b i { background: var(--tangerine); color: var(--on-accent); }
.hd-ticker { background: var(--charcoal); color: var(--paper); }
.hd-ticker ul { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-8); list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-4); font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.hd-ticker li::after { content: "→"; margin-left: var(--space-4); color: var(--tangerine); }
.hd-ticker li:last-child::after { content: ""; margin: 0; }
@media (max-width: 860px) {
  .hd-nav__links { display: none; }
  .hd-hero__grid { grid-template-columns: 1fr; padding: var(--space-8) 0 var(--space-12); }
  .hd-hero__visual { min-height: 380px; }
  .hd-ticker ul { justify-content: flex-start; font-size: 16px; }
  .hd-hero__inner, .hd-ticker ul { padding-left: var(--space-4); padding-right: var(--space-4); }
}
[data-theme="dark"] .hd-hero__visual { background: radial-gradient(90% 60% at 70% 115%, var(--royal) 0%, rgba(16,91,255,0) 70%), var(--surface-200); }
[data-theme="dark"] .hd-ticker { background: var(--surface-200); }

/* ---------- Stage: dark statement hero + services (always Charcoal) ---------- */
.hd-stage { position: relative; background: var(--night); color: var(--paper); overflow: hidden; }
.hd-stage__glow { position: relative; isolation: isolate; background:
  radial-gradient(ellipse 55% 70% at 50% -12%, rgba(243,238,230,.26) 0%, rgba(243,238,230,.08) 40%, rgba(243,238,230,0) 70%),
  radial-gradient(ellipse 45% 30% at 50% 108%, rgba(16,91,255,.28) 0%, rgba(16,91,255,0) 70%),
  var(--night); }
/* hairline column grid, fading towards the bottom */
.hd-stage__glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(243,238,230,.07) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%; background-position: 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 60%, transparent 100%); }
/* film grain + vignette */
.hd-stage__glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image:
    radial-gradient(ellipse 80% 75% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .5; mix-blend-mode: soft-light; }
.hd-stage__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-8); }
.hd-stage__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--space-6) 0; font-size: 14px; }
.hd-stage__nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.hd-stage__nav a:not(.hd-btn) { color: var(--paper); text-decoration: none; opacity: .8; }
.hd-stage__nav a:not(.hd-btn):hover { opacity: 1; }
.hd-stage__nav .hd-stage__right { justify-self: end; display: flex; align-items: center; gap: var(--space-6); }
.hd-stage__nav img { display: block; height: 30px; }
.hd-stage__hero { position: relative; min-height: 620px; display: grid; place-items: center; padding: var(--space-16) 0 var(--space-24); }
.hd-stage__side { position: absolute; font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.hd-stage__side--l { left: 0; top: 34%; }
.hd-stage__side--r { right: 0; top: 32%; }
.hd-stage__side--r img { height: 34px; display: block; }
.hd-stage__title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 10vw, 150px); line-height: .86; letter-spacing: -.055em; }
.hd-stage__title .hd-serif { display: inline-block; font-size: 1.12em; letter-spacing: -.03em; line-height: .9; }
.hd-stage__title .hd-dot { display: inline-block; width: .15em; height: .15em; margin-left: .04em; border-radius: 50%; background: var(--tangerine); vertical-align: baseline; }
.hd-stage__last { position: relative; display: inline-block; }
.hd-stage__aside { position: absolute; left: 100%; bottom: .3em; width: 230px; margin-left: var(--space-6); text-align: left; font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; letter-spacing: 0; opacity: .8; }
.hd-stage__cta { margin-top: var(--space-12); display: flex; justify-content: center; gap: var(--space-3); }
.hd-stage__cta .hd-btn--ghost { color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(243,238,230,.45); }
.hd-scroll { position: absolute; left: 50%; bottom: var(--space-6); width: 96px; height: 96px; margin-left: -48px; }
.hd-scroll svg { width: 100%; height: 100%; animation: hd-spin 18s linear infinite; }
.hd-scroll text { fill: var(--paper); font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hd-scroll span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; color: var(--tangerine); }
@keyframes hd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hd-scroll svg { animation: none; } }

.hd-stage__services { padding: var(--space-24) 0; display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); }
.hd-stage__h2 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: .92; letter-spacing: -.045em; }
.hd-stage__h2 .hd-serif { font-size: 1.1em; }
.hd-stage__intro { margin: var(--space-6) 0 0; max-width: 28ch; font-size: 16px; line-height: 1.55; opacity: .75; }
.hd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.hd-stage__links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.hd-tile { background: var(--night-raised); padding: var(--space-6); min-height: 210px; display: flex; flex-direction: column; }
.hd-tile__num { width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; background: rgba(254,133,0,.14); color: var(--tangerine); font-weight: 800; font-size: 13px; }
.hd-tile h3 { margin: auto 0 var(--space-2); font-family: var(--font-display); font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -.015em; }
.hd-tile p { margin: 0; font-size: 13px; line-height: 1.45; opacity: .72; }
.hd-tile--royal { background: var(--royal); } .hd-tile--royal .hd-tile__num { background: rgba(243,238,230,.18); color: var(--paper); } .hd-tile--royal p { opacity: .9; }
@media (max-width: 900px) {
  .hd-stage__nav { grid-template-columns: 1fr auto; } .hd-stage__nav > ul { display: none; } .hd-stage__nav .hd-stage__right ul { display: none; }
  .hd-stage__side { display: none; }
  .hd-stage__aside { position: static; display: block; width: auto; margin: var(--space-6) auto 0; max-width: 32ch; text-align: center; }
  .hd-stage__services { grid-template-columns: 1fr; padding: var(--space-16) 0; }
  .hd-tiles { grid-template-columns: minmax(0, 1fr); } .hd-tile { min-height: 160px; }
  .hd-stage__cta { flex-direction: column; align-items: center; }
  .hd-stage__nav .hd-stage__links { display: none; }
  .hd-stage__h2 { font-size: 44px; }
  .hd-stage__inner { padding: 0 var(--space-4); }
}