/* F. Mnyaiza Attorneys — coming soon page
   Palette: ink navy + antique gold, engraved-letterhead aesthetic */

:root{
  --ink:        #070a10;
  --ink-2:      #0c111c;
  --panel:      #0f1826;
  --gold:       #c9a24a;
  --gold-bright:#e9cd8c;
  --gold-dim:   rgba(201,162,74,0.35);
  --cream:      #f4eee0;
  --muted:      #93a0b3;
  --rule:       rgba(201,162,74,0.28);
  --serif:      "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:       "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  background:
    radial-gradient(120% 90% at 50% -10%, #14203a 0%, var(--ink-2) 45%, var(--ink) 100%);
  color:var(--cream);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* faint engraved ledger grid, barely-there */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:0.045;
  z-index:0;
}

/* grain overlay for tactility */
.grain{
  position:fixed;
  inset:-50%;
  width:200%;
  height:200%;
  pointer-events:none;
  z-index:1;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(8) infinite;
}
@keyframes grain-shift{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(-2%,-1%); }
  50%{ transform:translate(1%,-2%); }
  75%{ transform:translate(-1%,2%); }
}

.stage{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6vh 6vw 3vh;
}

/* decorative engraved frame */
.frame{
  position:fixed;
  inset:22px;
  border:1px solid var(--gold-dim);
  pointer-events:none;
  z-index:2;
}
.frame::before,
.frame::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border:1px solid var(--gold);
  opacity:0.6;
}
.frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.side-label{
  position:fixed;
  top:50%;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:0.32em;
  color:var(--muted);
  writing-mode:vertical-rl;
  text-transform:uppercase;
  z-index:2;
  opacity:0.65;
}
.side-label--left{ left:34px; transform:translateY(-50%) rotate(180deg); }
.side-label--right{ right:34px; transform:translateY(-50%); }

.content{
  position:relative;
  z-index:3;
  flex:1 0 auto;
  max-width:640px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2.5rem 0;
}

/* seal / monogram */
.seal{
  width:112px;
  height:112px;
  margin-bottom:2rem;
  opacity:0;
  animation: seal-in 1.1s cubic-bezier(.22,1,.36,1) 0.15s forwards;
}
@keyframes seal-in{
  0%{ opacity:0; transform:scale(0.7) rotate(-12deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.seal-ring{ fill:none; stroke:var(--gold); }
.seal-ring--outer{ stroke-width:1; opacity:0.85; }
.seal-ring--inner{ stroke-width:0.75; opacity:0.5; }
.seal-mono{
  font-family:var(--serif);
  font-size:40px;
  font-weight:600;
  fill:var(--gold-bright);
}
.seal-scale{
  fill:none;
  stroke:var(--gold);
  stroke-width:1;
  opacity:0;
}

.eyebrow{
  margin:0 0 1.1rem;
  font-size:11.5px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}

.firm-name{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem, 6vw, 4.4rem);
  line-height:1.05;
  color:var(--cream);
  letter-spacing:-0.01em;
}
.firm-name em{
  font-style:italic;
  font-weight:500;
  color:var(--gold-bright);
}

.ornament{
  display:flex;
  align-items:center;
  gap:14px;
  margin:1.9rem 0 1.7rem;
  width:100%;
  max-width:280px;
}
.ornament-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-dim));
}
.ornament .ornament-line:last-child{
  background:linear-gradient(90deg, var(--gold-dim), transparent);
}
.ornament-mark{
  color:var(--gold);
  font-size:12px;
  transform:translateY(-1px);
}

.headline{
  margin:0 0 0.85rem;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.25rem, 2.4vw, 1.6rem);
  color:var(--cream);
  letter-spacing:0.01em;
}

.body-copy{
  margin:0 0 2.3rem;
  max-width:440px;
  font-size:0.98rem;
  line-height:1.75;
  color:var(--muted);
  font-weight:400;
}

.contact-wrap{
  font-style:normal;
  display:inline-block;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0.95rem 1.9rem;
  border:1px solid var(--gold);
  border-radius:2px;
  color:var(--gold-bright);
  text-decoration:none;
  font-family:var(--sans);
  font-size:0.88rem;
  letter-spacing:0.04em;
  position:relative;
  overflow:hidden;
  transition:color 0.4s ease, box-shadow 0.4s ease;
}
.contact-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gold);
  transform:translateX(-101%);
  transition:transform 0.45s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.contact-btn:hover{
  color:var(--ink);
}
.contact-btn:hover::before{
  transform:translateX(0);
}
.contact-icon{ flex-shrink:0; }

/* staggered reveal */
.reveal{
  opacity:0;
  transform:translateY(14px);
  animation: rise 0.9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--d) * 0.12s + 0.1s);
}
@keyframes rise{
  to{ opacity:1; transform:translateY(0); }
}

.site-footer{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.55rem;
  text-align:center;
  padding:0 6vw;
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.footer-rule{
  width:46px;
  height:1px;
  background:var(--gold-dim);
  margin-bottom:0.3rem;
}
.footer-text{
  margin:0;
  font-size:0.8rem;
  color:var(--muted);
  letter-spacing:0.01em;
}
.footer-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.25s ease, color 0.25s ease;
}
.footer-link--brand{
  color:var(--gold-bright);
  font-weight:500;
}
.footer-link--brand:hover{
  border-color:var(--gold);
}
.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.74rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  padding-bottom:1px;
  border-bottom:1px solid transparent;
  transition:color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.footer-cta:hover{
  color:var(--gold-bright);
  border-color:var(--gold-dim);
  gap:9px;
}

@media (max-width:640px){
  .side-label{ display:none; }
  .frame{ inset:12px; }
  .stage{ padding:5vh 7vw 3vh; }
  .content{ padding:1.75rem 0; }
  .site-footer{ padding-top:0.5rem; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0)); }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .seal{ animation:none; opacity:1; transform:none; }
  .grain{ animation:none; }
}