/* ============================================================
   Biroul de Mediere Stegarescu Gheorghe — Design System
   Identity derived from the SG emblem: antique gold, warm ink,
   ivory paper. Classic-premium legal / mediation.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --ink:        #16120B;   /* warm near-black (logo black) */
  --ink-2:      #211B11;
  --ink-soft:   #3B3326;
  --cream:      #F6F1E7;   /* paper / ivory */
  --cream-2:    #FBF8F1;
  --paper:      #FFFFFF;

  --gold:       #B0863C;   /* primary antique gold */
  --gold-bright:#C9A24B;
  --gold-deep:  #735317;   /* WCAG AA on cream (~6.5:1) */
  --gold-deep-orig: #876326;
  --gold-pale:  #E7D6AE;
  --gold-wash:  #F3EBD9;

  --muted:      #6E6555;   /* body grey-warm */
  --muted-2:    #948A78;
  --line:       rgba(22,18,11,0.10);
  --line-2:     rgba(22,18,11,0.06);
  --line-gold:  rgba(176,134,60,0.30);

  /* metallic gold gradient for the emblem + accents */
  --grad-gold:  linear-gradient(135deg,#E9D49A 0%,#C9A24B 30%,#9C7530 55%,#D8BC78 78%,#A9802F 100%);
  --grad-gold-text: linear-gradient(100deg,#caa052 0%,#9c7530 45%,#d8bc78 70%,#9c7530 100%);
  --grad-ink:   linear-gradient(165deg,#211B11 0%,#16120B 60%,#100D08 100%);

  /* ---- Type ---- */
  --serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --caps:   "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sans:   "Hanken Grotesk", "Mulish", system-ui, sans-serif;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* ---- Shadow ---- */
  --sh-sm: 0 1px 2px rgba(22,18,11,.06), 0 2px 6px rgba(22,18,11,.05);
  --sh:    0 8px 24px -10px rgba(22,18,11,.18), 0 2px 6px rgba(22,18,11,.06);
  --sh-lg: 0 30px 60px -28px rgba(22,18,11,.34), 0 8px 22px -14px rgba(22,18,11,.16);
  --sh-gold: 0 16px 40px -16px rgba(135,99,38,.45);

  /* ---- Layout ---- */
  --maxw: 1140px;
  --gut: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #16120B;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .002em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold-pale); color: var(--ink); }

/* ---- Typography helpers ---- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 500; }
.gold-text {
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}
.eyebrow {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12.5px;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-weight: 400;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center::before { background: var(--gold); }
.lead { font-size: 1.18rem; color: var(--muted); line-height: 1.7; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.section-sm { padding-block: clamp(48px, 6vw, 88px); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --bg: var(--ink);
  --fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: .01em;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s, color .3s, border-color .3s;
  position: relative;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }

/* gold-outline pill — refined alternative to btn-ink, harmonized with site */
.btn-outline-gold {
  background: transparent;
  color: var(--gold-deep);
  border: 1px solid rgba(176,134,60,.55);
  padding: 13px 26px;
  position: relative; overflow: hidden;
  font-weight: 600;
  isolation: isolate;
}
.btn-outline-gold::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg,#E9D49A 0%,#C9A24B 30%,#9C7530 55%,#D8BC78 78%,#A9802F 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  z-index: -1;
}
.btn-outline-gold:hover { color: #2a1f08; border-color: transparent; box-shadow: 0 18px 38px -18px rgba(135,99,38,.5); }
.btn-outline-gold:hover::before { transform: scaleX(1); }
.btn-outline-gold svg { transition: transform .35s ease; }
.btn-outline-gold:hover svg { transform: translateX(4px); }

.btn-gold {
  --fg: #2a1f08;
  background: linear-gradient(135deg,#E9D49A 0%,#C9A24B 30%,#9C7530 55%,#D8BC78 78%,#A9802F 100%);
  box-shadow: var(--sh-gold);
  color: #2a1f08;
}
.btn-gold:hover { box-shadow: 0 22px 48px -16px rgba(135,99,38,.6); }

.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: var(--ink-2); box-shadow: var(--sh); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-gold);
}
.btn-ghost:hover { border-color: var(--gold); background: var(--gold-wash); }

.btn-ghost-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(231,214,174,.35);
}
.btn-ghost-light:hover { border-color: var(--gold-bright); background: rgba(231,214,174,.08); }

.btn-lg { padding: 18px 38px; font-size: 1.02rem; }

.linklike {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
  padding-bottom: 2px;
  transition: gap .25s, color .25s, border-color .25s;
}
.linklike:hover { gap: .85em; color: var(--gold); border-color: var(--gold); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  position: relative;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--line-gold); }

.icon-badge {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--gold-wash);
  border: 1px solid var(--line-gold);
  color: var(--gold-deep);
  margin-bottom: 22px;
}
.icon-badge svg { width: 27px; height: 27px; }

.icon-badge.on-ink {
  background: rgba(231,214,174,.08);
  border-color: rgba(231,214,174,.18);
  color: var(--gold-bright);
}

/* ---- Inputs ---- */
.field { display: block; margin-bottom: 14px; border: 0; padding: 0; min-inline-size: 0; }
fieldset, fieldset.field { border: 0 !important; padding: 0 !important; margin: 0; margin-bottom: 14px; }
fieldset.field legend {
  padding: 0; display: block;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-deep); margin-bottom: 7px;
  font-family: var(--sans);
}
.field label {
  display: block;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-deep); margin-bottom: 7px;
  font-family: var(--sans);
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(176,134,60,.14);
}

/* ---- Divider / flourish ---- */
.flourish { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); }
.flourish::before, .flourish::after { content:""; width: 46px; height:1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); }
.flourish svg { width: 18px; height: 18px; }

/* ============================================================
   Scroll reveal
   ============================================================ */
/* Reveal disabled — content always visible, no transitions on scroll */
.reveal, .reveal.in, .reveal.d1, .reveal.d2, .reveal.d3, .reveal.d4 { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Wordmark lockup ---- */
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
.wordmark .wm-1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.02rem; color: var(--gold-deep); letter-spacing: .01em; margin-bottom: 2px;
}
.wordmark .wm-2 {
  font-family: var(--caps); text-transform: uppercase; letter-spacing: .14em;
  font-size: .92rem; color: var(--ink); font-weight: 400;
}
.wordmark.on-ink .wm-2 { color: var(--cream); }
.wordmark.on-ink .wm-1 { color: var(--gold-bright); }
.wordmark.compact .wm-1 { font-size: .9rem; }
.wordmark.compact .wm-2 { font-size: .8rem; letter-spacing: .12em; }

.emblem-anim .monogram { }

/* grain texture removed for scroll performance */
.grain::after { content: none; }

/* content-visibility removed — caused empty placeholder boxes on mobile and tablet renders */

/* ============================================================
   Accessibility — WCAG 2.1 AA
   ============================================================ */

/* Screen reader only utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--sans);
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: top .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Global focus-visible: gold ring */
:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(176,134,60,.25);
}
.btn:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Suppress default focus only when focus-visible supported & not active */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* Field error announce style */
.field input.err, .field textarea.err {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179,38,30,.18);
}
.field .err-msg {
  display: block;
  margin-top: 6px;
  color: #8c1d18;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Reduced motion — explicit guard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Active nav link indicator (aria-current) */
.navlink[aria-current="page"],
.m-link[aria-current="page"] {
  color: var(--gold-deep);
  font-weight: 700;
}