/* ==========================================================================
   Jones Legal — Coming Soon
   Barristers & Solicitors · Freetown, Sierra Leone
   ========================================================================== */

:root{
  /* Palette — derived from the Jones Legal mark */
  --navy-950:#050b18;
  --navy-900:#0a1730;
  --navy-800:#0e1d3a;
  --navy-700:#152847;
  --navy-600:#22375f;

  --gold-300:#e8ce7b;
  --gold-400:#d7b64d;
  --gold-500:#c9a227;
  --gold-600:#ad8a22;
  --gold-700:#8c6a1f;

  --ivory:#f7f4ec;
  --ivory-70: rgba(247,244,236,.72);
  --ivory-50: rgba(247,244,236,.52);
  --ivory-30: rgba(247,244,236,.40);
  --ivory-14: rgba(247,244,236,.14);
  --ivory-08: rgba(247,244,236,.08);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --container: 880px;
  --container-wide: 1040px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  height:100%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100%;
  min-height:100svh;
  background:
    radial-gradient(120% 90% at 82% -8%, rgba(201,162,39,.10), transparent 55%),
    radial-gradient(90% 70% at 10% 108%, rgba(201,162,39,.06), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 38%, var(--navy-900) 62%, var(--navy-950) 100%);
  color:var(--ivory);
  font-family:var(--sans);
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{
  background:var(--gold-500);
  color:var(--navy-950);
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
}

/* ------------------------------------------------------------------------
   Ambient background layers
   ------------------------------------------------------------------------ */

.grain{
  position:fixed;
  inset:-40px;
  z-index:5;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.glow{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(10px);
  will-change:transform;
}
.glow-a{
  width:56vw;
  height:56vw;
  max-width:820px;
  max-height:820px;
  top:-20vw;
  right:-16vw;
  background:radial-gradient(circle, rgba(201,162,39,.085) 0%, rgba(201,162,39,.03) 42%, rgba(201,162,39,0) 66%);
  animation:driftA 46s var(--ease-soft) infinite alternate;
}
.glow-b{
  width:46vw;
  height:46vw;
  max-width:700px;
  max-height:700px;
  bottom:-16vw;
  left:-12vw;
  background:radial-gradient(circle, rgba(201,162,39,.05) 0%, rgba(201,162,39,0) 66%);
  animation:driftB 56s var(--ease-soft) infinite alternate;
}

@keyframes driftA{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-3.5%, 3%) scale(1.06); }
}
@keyframes driftB{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(3%, -3%) scale(1.05); }
}

.watermark{
  position:fixed;
  top:50%;
  right:-8%;
  width:min(58vw, 820px);
  transform:translateY(-50%);
  z-index:0;
  opacity:.055;
  pointer-events:none;
  will-change:transform;
  transition:transform 1.4s var(--ease-out);
}
.watermark img{ width:100%; height:auto; }

/* ------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */

.hero{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:7.5vh 6vw 4vh;
  text-align:center;
}

.hero-inner{
  width:100%;
  max-width:var(--container-wide);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Logo ------------------------------------------------------------------ */

.logo-reveal{
  margin-bottom:clamp(1.9rem, 4vw, 2.75rem);
  animation:logoReveal 1.15s var(--ease-out) .05s both;
}
@keyframes logoReveal{
  from{ opacity:0; transform:translateY(14px) scale(.96); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

.logo-mark{
  width:clamp(148px, 15vw, 208px);
  height:auto;
  margin:0 auto;
}

/* Generic reveal-on-load elements ---------------------------------------- */

[data-reveal]{
  animation:revealUp .9s var(--ease-out) var(--delay, 0s) both;
}
@keyframes revealUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Eyebrow / Coming Soon --------------------------------------------------- */

.eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  margin:0 0 clamp(1.6rem, 3.4vw, 2.3rem);
}
.eyebrow-text{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-400);
  white-space:nowrap;
}
.eyebrow-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold-500);
  flex:none;
  animation:breathe 2.6s ease-in-out infinite;
}
.eyebrow-rule{
  height:1px;
  width:34px;
  background:linear-gradient(90deg, transparent, var(--gold-700) 50%, transparent);
  flex:none;
  animation:ruleGrow 1.1s var(--ease-out) calc(var(--delay, 0s) + .35s) both;
}
.eyebrow-rule:first-child{ transform-origin:right center; }
.eyebrow-rule:last-child{ transform-origin:left center; }
@keyframes ruleGrow{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

@keyframes breathe{
  0%,100%{ opacity:.45; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1.15); }
}

/* Headline ---------------------------------------------------------------- */

.headline{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.35rem, 6.1vw, 4.6rem);
  line-height:1.12;
  letter-spacing:.005em;
  color:var(--ivory);
  max-width:16ch;
}
.headline em{
  font-style:italic;
  font-weight:500;
  color:var(--gold-400);
  background:linear-gradient(180deg, var(--gold-300), var(--gold-600));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  padding:0 .02em;
}

/* Subtext ------------------------------------------------------------------ */

.subtext{
  margin:clamp(1.3rem, 3vw, 1.8rem) 0 0;
  max-width:46ch;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.98rem, 1.6vw, 1.1rem);
  line-height:1.75;
  color:var(--ivory-70);
}
.subtext-secondary{
  display:block;
  margin-top:.55rem;
  color:var(--ivory-50);
  font-weight:300;
}

/* Divider -------------------------------------------------------------- */

.divider{
  width:64px;
  height:1px;
  margin:clamp(2.4rem, 5vw, 3.4rem) 0 clamp(2.2rem, 4.6vw, 3rem);
  background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
  position:relative;
}

/* Contact list ------------------------------------------------------------ */

.contact-list{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-wrap:wrap;
  row-gap:1.1rem;
}

.contact-item{
  position:relative;
  display:flex;
  align-items:center;
  padding:0 clamp(1rem, 2.6vw, 2rem);
}
.contact-item + .contact-item{
  border-left:1px solid var(--ivory-14);
}

.contact-link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.4rem .1rem;
  position:relative;
}

.contact-icon{
  width:34px;
  height:34px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ivory-30);
  border-radius:50%;
  color:var(--gold-400);
  transition:border-color .45s var(--ease-out), background-color .45s var(--ease-out), color .45s var(--ease-out), transform .45s var(--ease-out);
}
.contact-icon svg{ width:16px; height:16px; }

.contact-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.contact-label{
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ivory-50);
  font-weight:600;
  margin-bottom:.18rem;
}
.contact-value{
  font-size:.94rem;
  font-weight:500;
  color:var(--ivory);
  letter-spacing:.01em;
  position:relative;
}
.contact-value::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:var(--gold-500);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out);
}

.contact-link:hover .contact-icon,
.contact-link:focus-visible .contact-icon{
  border-color:var(--gold-500);
  background:rgba(201,162,39,.1);
  color:var(--gold-300);
  transform:translateY(-2px);
}
.contact-link:hover .contact-value::after,
.contact-link:focus-visible .contact-value::after{
  transform:scaleX(1);
}

.copy-btn{
  width:26px;
  height:26px;
  margin-left:.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ivory-30);
  border-radius:6px;
  transition:color .35s var(--ease-out), background-color .35s var(--ease-out);
  flex:none;
}
.copy-btn svg{ width:14px; height:14px; }
.copy-btn:hover,
.copy-btn:focus-visible{
  color:var(--gold-300);
  background:var(--ivory-08);
}

a:focus-visible,
button:focus-visible{
  outline:1px solid var(--gold-500);
  outline-offset:3px;
  border-radius:4px;
}

/* Footer -------------------------------------------------------------- */

.hero-footer{
  margin-top:clamp(3.2rem, 7vw, 4.5rem);
  text-align:center;
  color:var(--ivory-50);
  font-size:.76rem;
  letter-spacing:.03em;
  line-height:1.8;
}
.hero-footer p{ margin:0; }
.hero-footer-place{
  color:var(--ivory-50);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.68rem;
  margin-top:.15rem !important;
}

/* Toast ----------------------------------------------------------------- */

.toast{
  position:fixed;
  left:50%;
  bottom:2.4rem;
  transform:translate(-50%, 12px);
  background:var(--ivory);
  color:var(--navy-900);
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:.7rem 1.2rem;
  border-radius:999px;
  box-shadow:0 12px 34px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  z-index:50;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1024px){
  .watermark{
    width:min(78vw, 640px);
    right:-18%;
    opacity:.05;
  }
}

@media (max-width:760px){
  .hero{
    padding:9vh 7vw 5vh;
  }
  .watermark{
    width:130vw;
    right:auto;
    left:50%;
    top:20%;
    transform:translate(-50%, -50%);
    opacity:.045;
  }
  .logo-mark{ width:clamp(120px, 34vw, 160px); }

  .headline{ max-width:14ch; }

  .subtext{ max-width:36ch; }

  .contact-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid var(--ivory-14);
    margin-top:.4rem;
  }
  .contact-item{
    padding:1.15rem .2rem;
    justify-content:center;
  }
  .contact-item + .contact-item{
    border-left:0;
    border-top:1px solid var(--ivory-14);
  }
  .contact-link{ padding:.2rem; }
}

@media (max-width:400px){
  .contact-value{ font-size:.88rem; }
  .headline{ letter-spacing:0; }
}

/* Short viewports: pull footer in, tighten rhythm */
@media (max-height:700px) and (min-width:761px){
  .hero{ padding:5.5vh 6vw 3vh; }
  .logo-reveal{ margin-bottom:1.4rem; }
  .divider{ margin:1.6rem 0 1.4rem; }
  .hero-footer{ margin-top:2rem; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .glow-a, .glow-b, .eyebrow-dot{ animation:none !important; }
  .watermark{ transition:none !important; }
  [data-reveal], .logo-reveal, .eyebrow-rule{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}