/* ============================================================
   MASTILO — Attorneys at Law, Belgrade
   Identity layer. Ink is the system: it bleeds, dabs, drips.
   Tokens
   ============================================================ */
:root{
  --obsidian:#0B0B0D;
  --carbon:#141417;
  --ash:#5B5B63;
  --hairline:#E7E5E1;
  --hairline-dark:#26262B;
  --white:#FFFFFF;
  --crimson:#002FA7;
  --crimson-bright:#3D6BFF;
  --font-display:"Bodoni Moda", Georgia, serif;
  --font-body:"Archivo", system-ui, sans-serif;
  --ease-ink:cubic-bezier(.22,1.2,.32,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
}

html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--obsidian);
  background:var(--white);
  margin:0;
  overflow-x:hidden;
}
::selection{ background:var(--crimson); color:var(--white); }
:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }
section[id], header[id]{ scroll-margin-top:76px; }

/* ============================================================
   Custom cursor — a droplet that swells over interactive ink
   ============================================================ */
.cursor-dot{
  position:fixed; top:0; left:0; z-index:200;
  width:10px; height:10px; margin:-5px 0 0 -5px;
  background:var(--crimson);
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
  pointer-events:none;
  opacity:0;
  transition:width .3s var(--ease-ink), height .3s var(--ease-ink),
             margin .3s var(--ease-ink), opacity .25s ease, background .25s ease;
  mix-blend-mode:normal;
  will-change:transform;
}
.cursor-dot.is-on{ opacity:.9; }
.cursor-dot.is-hover{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  background:var(--crimson);
  opacity:.28;
}
@media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }

/* ============================================================
   Masthead — centered editorial wordmark
   ============================================================ */
.masthead{ border-bottom:1px solid var(--hairline); background:var(--white); }
.eyebrow-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid var(--hairline);
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ash);
}
.logo{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(3rem, 11vw, 7.25rem);
  line-height:.95;
  letter-spacing:.1em;
  margin:0 0 .35em;
  text-indent:.1em; /* optically re-center against tracking */
}
.logo-o{ position:relative; color:var(--crimson); }
.logo-drip{
  position:absolute; left:50%; top:88%;
  width:.11em; height:auto;
  transform:translateX(-50%);
  fill:var(--crimson);
  filter:url(#inkbleed);
  animation:drip-stretch 6s ease-in-out infinite;
  transform-origin:top center;
}
@keyframes drip-stretch{
  0%,100%{ transform:translateX(-50%) scaleY(1); }
  50%{ transform:translateX(-50%) scaleY(1.14); }
}
.logo-sub{
  margin:0;
  font-size:.68rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--obsidian);
}

/* Masthead navigation — ink dabs bloom behind each label on hover */
.masthead-nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem 2.6rem;
  padding:1.1rem 1.5rem 1.35rem;
}
.nav-link{
  position:relative;
  display:inline-block;
  padding:.45rem .35rem;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--obsidian); text-decoration:none;
  transition:color .3s ease;
}
.nav-text{ position:relative; z-index:1; }
.ink-dab{
  position:absolute; inset:-4px -14px;
  background:var(--obsidian);
  border-radius:44% 56% 62% 38% / 55% 42% 58% 45%;
  filter:url(#inkbleed);
  transform:scale(.25) rotate(-6deg);
  opacity:0;
  transition:transform .45s var(--ease-ink), opacity .3s ease;
  z-index:0;
}
.nav-link:hover, .nav-link:focus-visible{ color:var(--white); }
.nav-link:hover .ink-dab, .nav-link:focus-visible .ink-dab{
  transform:scale(1) rotate(0deg); opacity:1;
}
.nav-link--crimson .ink-dab{ background:var(--crimson); }

/* ============================================================
   Sticky mini bar
   ============================================================ */
.minibar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
  transform:translateY(-102%);
  transition:transform .5s var(--ease-out);
}
.minibar.show{ transform:translateY(0); }
.minibar-inner{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; height:56px;
}
.minibar-logo{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:.14em; font-size:1.1rem;
  color:var(--obsidian); text-decoration:none;
}
.minibar-nav{ display:flex; gap:2rem; }
.minibar-nav--left{ justify-content:flex-end; padding-right:2.5rem; }
.minibar-nav--right{ justify-content:flex-start; padding-left:2.5rem; }
.minibar-nav a{
  position:relative;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--obsidian); text-decoration:none; padding:.4rem 0;
}
.minibar-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--crimson);
  filter:url(#inkbleed);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-ink);
}
.minibar-nav a:hover::after, .minibar-nav a:focus-visible::after{ transform:scaleX(1); }
.burger{ display:none; }

@media (max-width:767px){
  .minibar-nav{ display:none; }
  .minibar-inner{ grid-template-columns:auto 1fr auto; }
  .minibar-logo{ grid-column:1; }
  .burger{
    grid-column:3;
    display:flex; flex-direction:column; gap:6px;
    background:none; border:0; padding:10px; cursor:pointer;
  }
  .burger span{
    width:26px; height:2px; background:var(--obsidian);
    transition:transform .3s ease;
  }
}

/* ============================================================
   Overlay menu
   ============================================================ */
.overlay-menu{
  position:fixed; inset:0; z-index:150;
  background:var(--obsidian);
  display:flex; flex-direction:column; justify-content:center;
  padding:2rem clamp(1.5rem, 8vw, 6rem);
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.overlay-menu.open{
  opacity:1; visibility:visible;
  transition:opacity .45s ease;
}
.overlay-close{
  position:absolute; top:.6rem; right:1rem;
  background:none; border:0; cursor:pointer;
  color:var(--white); font-size:2.6rem; line-height:1; font-weight:300;
  padding:.5rem;
}
.overlay-nav{ display:flex; flex-direction:column; gap:.4rem; }
.overlay-nav a{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 9vw, 4.2rem);
  font-weight:500;
  color:var(--white); text-decoration:none;
  padding:.15em 0;
  transform:translateY(24px); opacity:0;
  transition:transform .6s var(--ease-out), opacity .6s ease, color .3s ease, font-style .3s;
}
.overlay-menu.open .overlay-nav a{ transform:translateY(0); opacity:1; }
.overlay-menu.open .overlay-nav a:nth-child(1){ transition-delay:.08s; }
.overlay-menu.open .overlay-nav a:nth-child(2){ transition-delay:.16s; }
.overlay-menu.open .overlay-nav a:nth-child(3){ transition-delay:.24s; }
.overlay-menu.open .overlay-nav a:nth-child(4){ transition-delay:.32s; }
.overlay-nav a:hover, .overlay-nav a:focus-visible{ color:var(--crimson-bright); font-style:italic; }
.overlay-foot{
  margin-top:3rem;
  color:var(--ash);
  font-size:.65rem; letter-spacing:.3em; text-transform:uppercase;
}

/* ============================================================
   HERO — the live ink field
   ============================================================ */
.hero{
  position:relative;
  min-height:min(88vh, 900px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--hairline);
}
#ink-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
/* Paper grain over the ink — a faint handmade tooth */
.hero-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
.hero-copy{
  position:relative; z-index:2;
  max-width:52rem;
  padding:5rem 1.5rem 6rem;
  text-align:center;
}
/* the ink is also physically repelled from this block in the simulation */
.hero-copy::before{
  content:""; position:absolute; inset:-8% -14%;
  background:radial-gradient(58% 58% at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%);
  z-index:-1;
}
.hero-eyebrow{
  font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--crimson);
  margin:0 0 1.4rem;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.7rem, 7.5vw, 5.6rem);
  line-height:1.02;
  margin:0 0 1.5rem;
  letter-spacing:.005em;
}
.hero-title em{ font-style:italic; color:var(--crimson); font-weight:600; }
.hero-lede{
  max-width:36rem; margin:0 auto 2.4rem;
  font-size:clamp(.95rem, 1.4vw, 1.06rem);
  font-weight:400; line-height:1.75; color:#141417;
}
.hero-lede strong{ font-weight:600; }
.hero-cta{ display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; align-items:center; }

.hero-foot{
  position:absolute; left:0; right:0; bottom:1.4rem; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.hero-hint{
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ash);
  display:inline-flex; align-items:center; gap:.8rem;
}
.hint-line{
  display:inline-block; width:52px; height:1px; background:var(--ash);
  position:relative; overflow:hidden;
}
.hint-line::after{
  content:""; position:absolute; inset:0; background:var(--crimson);
  transform:translateX(-100%);
  animation:hint-sweep 2.6s var(--ease-out) infinite;
}
@keyframes hint-sweep{ 0%{transform:translateX(-100%);} 55%{transform:translateX(0);} 100%{transform:translateX(102%);} }


/* ============================================================
   Buttons — ink floods on hover
   ============================================================ */
.btn{
  position:relative; display:inline-block; overflow:hidden;
  padding:1rem 2.3rem;
  background:var(--obsidian); color:var(--white);
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; border:0; cursor:pointer;
  font-family:var(--font-body);
}
.btn::before{
  content:""; position:absolute; inset:-20%;
  background:var(--crimson);
  border-radius:38% 62% 55% 45% / 60% 40% 60% 40%;
  filter:url(#inkbleed);
  transform:scale(0) rotate(10deg);
  transform-origin:20% 80%;
  transition:transform .55s var(--ease-ink);
}
.btn:hover::before, .btn:focus-visible::before{ transform:scale(1.5) rotate(0deg); }
.btn{ isolation:isolate; }           /* contain the flood */
.btn::before{ z-index:-1; }          /* below label, above button ground */
.btn:active{ transform:translateY(1px); }

.btn--light{ background:var(--white); color:var(--obsidian); transition:color .3s ease; }
.btn--light:hover, .btn--light:focus-visible{ color:var(--white); }

.btn-ghost{
  position:relative;
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--obsidian); text-decoration:none;
  padding:.6rem .1rem;
}
.btn-ghost::after{
  content:""; position:absolute; left:0; right:0; bottom:.25rem; height:2px;
  background:var(--crimson);
  filter:url(#inkbleed);
  transform:scaleX(.32); transform-origin:left;
  transition:transform .45s var(--ease-ink);
}
.btn-ghost:hover::after, .btn-ghost:focus-visible::after{ transform:scaleX(1); }

/* Inline ink links */
.ink-link{
  position:relative; color:inherit; text-decoration:none;
}
.ink-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--crimson);
  filter:url(#inkbleed);
  transform:scaleX(.25); transform-origin:left;
  transition:transform .4s var(--ease-ink);
}
.ink-link:hover::after, .ink-link:focus-visible::after{ transform:scaleX(1); }

/* ============================================================
   Sections & headings
   ============================================================ */
.section{ padding:clamp(4.5rem, 9vw, 8rem) 0; }
.kicker{
  font-size:.6rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--crimson); margin:0 0 1.2rem;
}
.kicker--light{ color:#C9D6FF; position:relative; z-index:2; }
.section-head{ max-width:44rem; margin-bottom:clamp(2.5rem, 5vw, 4.5rem); }
.section-sub{
  color:#45454C; font-weight:400; line-height:1.7;
  margin:1.2rem 0 0; max-width:34rem;
}

/* Heading with an ink splash bleeding behind its first words */
.splash-head{
  position:relative; display:inline-block;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.12; margin:0;
}
.splash-head--lg{ font-size:clamp(2.2rem, 5vw, 3.8rem); }
.splash-head span{ position:relative; z-index:1; }
.splash{
  position:absolute; z-index:0;
  width:clamp(120px, 16vw, 210px); height:auto;
  left:-2.2rem; top:-2.4rem;
  fill:var(--crimson);
  opacity:0; transform:scale(.45) rotate(-10deg);
  transform-origin:center;
  transition:transform .9s var(--ease-ink), opacity .7s ease;
}
/* On white: a pale wash of ink, so the black heading stays fully readable on top of it */
.reveal.in .splash, .in .splash{ opacity:.13; transform:scale(1) rotate(0deg); }
/* On black: the ink is a deep blue stain and the white heading sits clearly above it */
.splash-head--dark{ color:var(--white); }
.splash-head--dark .splash{ opacity:0; }
.in .splash-head--dark .splash{ opacity:.9; }
.splash-head--dark .splash{ top:-1.3rem; }
.splash-head--lg + .contact-lede{ margin-top:1.4rem; }

.body-lg{
  font-size:clamp(1.1rem, 2vw, 1.35rem);
  line-height:1.6; font-weight:400; margin:0 0 1.4rem;
}
.body-md{ color:#26262B; font-weight:400; line-height:1.8; margin:0 0 2.2rem; }

.facts{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--hairline);
}
.facts li{
  padding:.85rem .2rem;
  border-bottom:1px solid var(--hairline);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:.9rem;
}
.facts li::before{
  content:""; width:7px; height:7px; flex:none;
  background:var(--crimson);
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}

/* ============================================================
   Ink dividers — a drawn line with hanging drops
   ============================================================ */
.ink-divider{
  position:relative;
  max-width:72rem; margin:0 auto; padding:0 1.5rem;
  height:64px;
}
.ink-divider svg{ width:100%; height:100%; display:block; overflow:visible; }
.divider-line{
  fill:none; stroke:var(--obsidian); stroke-width:1.5;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.8s var(--ease-out) .1s;
}
.ink-divider.in .divider-line{ stroke-dashoffset:0; }
.divider-drip{
  position:absolute; top:30px;
  width:7px; height:18px;
  background:var(--obsidian);
  border-radius:50% 50% 52% 48% / 24% 24% 76% 76%;
  filter:url(#inkbleed);
  transform:scaleY(0); transform-origin:top center;
  transition:transform .8s var(--ease-ink) 1s;
}
.divider-drip--red{ background:var(--crimson); transition-delay:1.25s; }
.ink-divider.in .divider-drip{ transform:scaleY(1); }

/* ============================================================
   Legal Services — vertical ledger
   Each row is an entry in the ledger. On hover it slides right,
   floods crimson, separates from the rest, and drips into an
   obsidian panel that explains the work.
   ============================================================ */
.svc-list{ border-top:1px solid var(--hairline); }
.svc{ border-bottom:1px solid var(--hairline); transition:opacity .35s ease; }
@media (hover:hover) and (pointer:fine){
  .svc-list:hover .svc:not(:hover):not(.open){ opacity:.3; }
}
.svc-row{
  position:relative; isolation:isolate;
  width:100%; display:flex; align-items:baseline; gap:.6rem 2rem;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-body);
  padding:1.7rem .4rem;
  transition:transform .5s var(--ease-out);
}
.svc-row::before{                     /* the crimson flood */
  content:""; position:absolute; z-index:-1;
  top:2px; bottom:2px; left:-1.6rem; right:-2.4rem;
  background:var(--crimson);
  border-radius:0 44% 48% 0 / 0 52% 46% 0;
  filter:url(#inkbleed);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s var(--ease-ink);
}
.svc-tag{
  min-width:8.5rem; flex:none;
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--crimson);
  transition:color .35s ease;
}
.svc-name{
  flex:1;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.45rem, 3.2vw, 2.35rem); line-height:1.08;
  color:var(--obsidian);
  transition:color .35s ease;
}
.svc-arrow{
  flex:none; align-self:center;
  font-size:1.3rem; color:var(--crimson);
  transition:transform .45s var(--ease-ink), color .35s ease;
}
/* hover / pinned / keyboard-focused: extend right, turn red, split */
.svc:hover .svc-row,
.svc.open .svc-row,
.svc:focus-within .svc-row{
  transform:translateX(1.4rem);
}
.svc:hover .svc-row::before,
.svc.open .svc-row::before,
.svc:focus-within .svc-row::before{
  transform:scaleX(1);
}
.svc:hover .svc-name, .svc.open .svc-name, .svc:focus-within .svc-name,
.svc:hover .svc-arrow, .svc.open .svc-arrow, .svc:focus-within .svc-arrow{
  color:var(--white);
}
.svc:hover .svc-tag, .svc.open .svc-tag, .svc:focus-within .svc-tag{
  color:rgba(255,255,255,.85);
}
.svc:hover .svc-arrow{ transform:translateX(.7rem); }
.svc.open .svc-arrow{ transform:rotate(90deg); }
.svc-row:focus-visible{ outline:2px solid var(--crimson); outline-offset:4px; }

/* the ink box */
.svc-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .65s var(--ease-out);
}
.svc:hover .svc-panel,
.svc.open .svc-panel,
.svc:focus-within .svc-panel{ grid-template-rows:1fr; }
.svc-panel-inner{ overflow:hidden; }
.svc-box{
  position:relative;
  margin:.4rem .4rem 2rem;
  background:var(--obsidian); color:#E8E8EA;
  padding:clamp(1.7rem, 3vw, 2.7rem);
}
.svc-box::before{                     /* crimson drips bleeding in from the red row */
  content:""; position:absolute; top:-9px; left:2rem;
  width:130px; height:24px; pointer-events:none;
  background:
    radial-gradient(circle at 12px 8px,  var(--crimson) 8px, transparent 9px),
    radial-gradient(circle at 58px 12px, var(--crimson) 5px, transparent 6px),
    radial-gradient(circle at 104px 6px, var(--crimson) 6.5px, transparent 7.5px);
  filter:url(#inkbleed);
}
.svc-desc{
  margin:0 0 1.5rem; max-width:46rem;
  font-weight:400; line-height:1.8; color:#E2E2E6;
}
.svc-points{
  list-style:none; margin:0 0 1.7rem; padding:0;
  display:grid; gap:0 2.5rem;
}
@media (min-width:768px){ .svc-points{ grid-template-columns:1fr 1fr; } }
.svc-points li{
  position:relative;
  padding:.6rem 0 .6rem 1.4rem;
  border-bottom:1px solid var(--hairline-dark);
  font-size:.88rem; font-weight:400; color:#D6D6DA;
}
.svc-points li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:6px; height:6px;
  background:var(--crimson-bright);
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}
.svc-foot{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
}
.svc-cta{
  position:relative;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--white); text-decoration:none; padding-bottom:.3rem;
}
.svc-cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--crimson-bright);
  filter:url(#inkbleed);
  transform:scaleX(.3); transform-origin:left;
  transition:transform .4s var(--ease-ink);
}
.svc-cta:hover::after, .svc-cta:focus-visible::after{ transform:scaleX(1); }
.svc-fee{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#9A9AA2;
}
@media (max-width:640px){
  .svc-row{ flex-wrap:wrap; padding:1.4rem .2rem; }
  .svc-tag{ width:100%; min-width:0; margin-bottom:.15rem; }
  .svc:hover .svc-row, .svc.open .svc-row, .svc:focus-within .svc-row{ transform:translateX(.7rem); }
  .svc-row::before{ left:-1rem; right:-1.2rem; }
}

/* ============================================================
   How To — index of guides (each opens a full article page)
   ============================================================ */
.gindex{ border-top:1px solid var(--hairline); }
.gitem{
  display:grid; grid-template-columns:9.5rem 1fr auto;
  gap:.4rem 2.5rem; align-items:baseline;
  padding:1.8rem .4rem;
  border-bottom:1px solid var(--hairline);
  text-decoration:none; color:inherit;
  transition:background .35s ease;
}
.gi-meta{
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash); line-height:2;
}
.gi-meta b{ display:block; color:var(--crimson); font-weight:600; }
.gi-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.3rem, 2.6vw, 1.9rem); line-height:1.15;
  position:relative; display:inline;
  transition:color .3s ease;
  background-image:linear-gradient(var(--crimson), var(--crimson));
  background-repeat:no-repeat; background-position:0 100%;
  background-size:0% 2px;
  transition:color .3s ease, background-size .5s var(--ease-ink);
}
.gi-dek{
  grid-column:2; max-width:42rem; margin-top:.5rem;
  font-size:.9rem; font-weight:400; line-height:1.7; color:#3E3E45;
}
.gi-arrow{
  align-self:center; font-size:1.25rem; color:var(--crimson);
  transition:transform .4s var(--ease-ink);
}
.gitem:hover .gi-title, .gitem:focus-visible .gi-title{
  color:var(--crimson);
  background-size:100% 2px;
}
.gitem:hover .gi-arrow{ transform:translateX(.6rem); }
@media (max-width:640px){
  .gitem{ grid-template-columns:1fr auto; }
  .gi-meta{ grid-column:1 / -1; }
  .gi-dek{ grid-column:1; }
}

.fine-note{
  margin-top:2.4rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash);
}

/* ============================================================
   Contact — obsidian chamber with a living ink shadow
   ============================================================ */
.section--dark{
  position:relative; overflow:hidden;
  background:var(--obsidian); color:var(--white);
}
.dark-blob{
  position:absolute; top:-140px; right:-160px;
  width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(0,47,167,.34), rgba(0,47,167,0));
  border-radius:42% 58% 55% 45% / 55% 42% 58% 45%;
  animation:blob-drift 22s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes blob-drift{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); border-radius:42% 58% 55% 45% / 55% 42% 58% 45%; }
  50%{ border-radius:58% 42% 45% 55% / 45% 58% 42% 58%; }
  100%{ transform:translate(-90px, 70px) rotate(24deg) scale(1.15); border-radius:48% 52% 60% 40% / 52% 46% 54% 48%; }
}
.contact-lede{ font-weight:300; line-height:1.75; color:#C9C9CE; margin:0 0 2.4rem; max-width:26rem; }
.contact-details{ font-style:normal; font-weight:300; line-height:2; color:#C9C9CE; }
.contact-details p{ margin:0; }
.contact-details p:first-child{ letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--white); margin-bottom:.4rem; }
.contact-hours{ margin-top:.8rem !important; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); }

/* Form */
#matter-form .field{ margin-bottom:1.9rem; display:flex; flex-direction:column; }
#matter-form label{
  font-size:.58rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ash); margin-bottom:.55rem;
}
#matter-form input,
#matter-form select,
#matter-form textarea{
  background:transparent;
  border:0; border-bottom:1px solid var(--hairline-dark);
  color:var(--white);
  font-family:var(--font-body); font-weight:300; font-size:1rem;
  padding:.55rem .1rem;
  border-radius:0;
  transition:border-color .3s ease;
}
#matter-form select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23002FA7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
}
#matter-form select option{ background:var(--obsidian); color:var(--white); }
#matter-form input:focus,
#matter-form select:focus,
#matter-form textarea:focus{
  outline:none; border-color:var(--crimson);
}
#matter-form .field{ position:relative; }
#matter-form .field::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--crimson);
  filter:url(#inkbleed);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-ink);
}
#matter-form .field:focus-within::after{ transform:scaleX(1); }
#matter-form textarea{ resize:vertical; min-height:96px; }
.form-foot{ display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between; }
.form-note{ font-size:.66rem; color:var(--ash); max-width:22rem; line-height:1.6; margin:0; }
.form-success{ border:1px solid var(--hairline-dark); padding:2.4rem; }
.form-success-title{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:2rem; color:var(--crimson-bright); margin:0 0 .8rem;
}
.form-success p:last-child{ font-weight:300; line-height:1.75; color:#C9C9CE; margin:0; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--obsidian); color:var(--ash); border-top:1px solid var(--hairline-dark); }
.footer-top{
  display:flex; flex-wrap:wrap; gap:1.4rem;
  justify-content:space-between; align-items:center;
  padding:2.2rem 0 1.6rem;
  border-bottom:1px solid var(--hairline-dark);
}
.footer-logo{
  font-family:var(--font-display); font-weight:600; letter-spacing:.16em;
  font-size:1.3rem; color:var(--white); text-decoration:none;
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.8rem; }
.footer-nav a{
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ash); text-decoration:none;
  transition:color .3s ease;
}
.footer-nav a:hover, .footer-nav a:focus-visible{ color:var(--crimson-bright); }
.footer-bottom{ padding:1.4rem 0 2.4rem; font-size:.68rem; line-height:1.8; }
.footer-bottom p{ margin:0; }
.footer-disclaimer{ color:#5A5A60; max-width:44rem; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s ease var(--d, 0s), transform .9s var(--ease-out) var(--d, 0s);
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   Reduced motion — everything settles, nothing moves
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .reveal .splash, .splash{ opacity:.13; transform:none; }
  .splash-head--dark .splash{ opacity:.9; }
  .divider-line{ stroke-dashoffset:0; }
  .divider-drip{ transform:scaleY(1); }
  .cursor-dot{ display:none; }
}

/* ============================================================
   ARTICLE PAGES — Freshfields / Bird & Bird register:
   quiet chrome, generous measure, vertical steps
   ============================================================ */
.site-top{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.site-top .minibar-inner{ height:60px; }

.crumbs{
  padding:1rem 0 0;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash);
}
.crumbs a{ color:var(--ash); text-decoration:none; transition:color .3s ease; }
.crumbs a:hover, .crumbs a:focus-visible{ color:var(--crimson); }

.article-hero{ padding:2.6rem 0 2.8rem; border-bottom:1px solid var(--hairline); }
.a-title{
  font-family:var(--font-display); font-weight:550;
  font-size:clamp(2.1rem, 5.2vw, 3.5rem); line-height:1.06;
  margin:.9rem 0 1.2rem; max-width:52rem;
}
.a-dek{
  max-width:44rem; margin:0 0 1.6rem;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  font-weight:400; line-height:1.75; color:#26262B;
}
.a-meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ash);
}
.a-meta span::after{ content:""; }

.article-grid{ padding:3.2rem 0 4.5rem; }

/* body copy */
.article-body p{
  margin:0 0 1.4rem; max-width:44rem;
  font-size:1.02rem; font-weight:400; line-height:1.85; color:#1B1B1F;
}
.article-body h2{
  position:relative;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.45rem, 2.6vw, 1.85rem); line-height:1.2;
  margin:2.8rem 0 1.1rem; max-width:44rem;
}
.article-body h2::before{
  content:""; display:block;
  width:30px; height:3px; margin-bottom:.8rem;
  background:var(--crimson);
  filter:url(#inkbleed);
}
.article-body h3{
  font-weight:600; font-size:1.05rem; letter-spacing:.02em;
  margin:1.9rem 0 .7rem;
}
.article-body a{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--crimson), var(--crimson));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 2px;
  transition:color .3s ease;
}
.article-body a:hover, .article-body a:focus-visible{ color:var(--crimson); }
.article-body strong{ font-weight:600; color:var(--obsidian); }
.article-body ul{ margin:0 0 1.5rem; padding-left:1.2rem; max-width:44rem; }
.article-body ul li{ margin:0 0 .5rem; line-height:1.75; color:#1B1B1F; }

/* vertical numbered steps — a timeline, not a grid */
.a-steps{
  list-style:none; counter-reset:as;
  margin:2rem 0 2.4rem; padding:0; max-width:44rem;
}
.a-steps > li{
  position:relative;
  margin-left:1.2rem; padding:0 0 2.1rem 2.6rem;
  border-left:1px solid var(--hairline);
}
.a-steps > li:last-child{ padding-bottom:.4rem; }
.a-steps > li::before{
  counter-increment:as; content:counter(as);
  position:absolute; left:-1.05rem; top:-.55rem;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:2.2rem; line-height:1; color:var(--crimson);
  background:var(--white); padding:.28rem 0;
}
.a-steps > li > strong{
  display:block; margin-bottom:.4rem;
  font-weight:600; font-size:1.08rem; color:var(--obsidian);
}
.a-steps p{ margin-bottom:.8rem; }

/* document checklist */
.checklist{ list-style:none; margin:1.2rem 0 2rem; padding:0; max-width:44rem; }
.checklist li{
  position:relative;
  padding:.6rem 0 .6rem 1.6rem;
  border-bottom:1px solid var(--hairline);
  font-weight:400; color:#26262B; line-height:1.6;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:7px; height:7px;
  background:var(--crimson);
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}

/* obsidian aside boxes ("In practice") — same drip language as services */
.note-ink{
  position:relative;
  background:var(--obsidian); color:#E4E4E8;
  padding:1.7rem 1.9rem; margin:2.2rem 0; max-width:44rem;
}
.note-ink::before{
  content:""; position:absolute; top:-9px; left:1.6rem;
  width:110px; height:22px; pointer-events:none;
  background:
    radial-gradient(circle at 10px 8px, var(--crimson) 7px, transparent 8px),
    radial-gradient(circle at 50px 11px, var(--crimson) 4.5px, transparent 5.5px),
    radial-gradient(circle at 88px 6px, var(--crimson) 6px, transparent 7px);
  filter:url(#inkbleed);
}
.note-ink .nk{
  display:block; margin-bottom:.6rem;
  font-size:.58rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--crimson-bright);
}
.note-ink p{ margin:0; color:#E4E4E8; font-size:.95rem; line-height:1.8; }
.note-ink p + p{ margin-top:.8rem; }

/* right rail */
.rail{ display:flex; flex-direction:column; gap:2.2rem; }
@media (min-width:1024px){ .rail{ position:sticky; top:92px; } }
.rail-label{
  font-size:.58rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--ash); margin:0 0 .9rem;
}
.toc{ border-left:1px solid var(--hairline); padding-left:1.2rem; }
.toc a{
  display:block; padding:.35rem 0;
  font-size:.82rem; color:#3E3E45; text-decoration:none;
  transition:color .25s ease, transform .25s ease;
}
.toc a:hover, .toc a:focus-visible{ color:var(--crimson); transform:translateX(3px); }

.contact-card{
  background:var(--obsidian); color:var(--white);
  padding:1.7rem 1.7rem 1.9rem;
}
.contact-card .cc-name{
  font-family:var(--font-display); font-weight:600; font-size:1.25rem;
  margin:0 0 .3rem;
}
.contact-card .cc-role{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:#9A9AA2; margin:0 0 1.1rem;
}
.contact-card p{ font-size:.85rem; line-height:1.7; color:#D6D6DA; margin:0 0 1.3rem; }
.contact-card .btn{ padding:.85rem 1.6rem; }

/* related guides */
.related{ margin-top:3.4rem; padding-top:2.2rem; border-top:1px solid var(--hairline); }
.related a{
  display:block; padding:.9rem .2rem;
  border-bottom:1px solid var(--hairline);
  text-decoration:none; color:inherit;
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  transition:color .3s ease, padding-left .3s ease;
}
.related a:hover, .related a:focus-visible{ color:var(--crimson); padding-left:.7rem; }

/* closing CTA band */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--obsidian); color:var(--white);
  padding:4.2rem 0 4.6rem;
}
.cta-band h2{
  font-family:var(--font-display); font-weight:550;
  font-size:clamp(1.9rem, 4.5vw, 3rem); line-height:1.1;
  margin:0 0 .9rem; max-width:34rem;
}
.cta-band h2 em{ font-style:italic; color:var(--crimson-bright); }
.cta-band p{ color:#C9C9CE; font-weight:400; line-height:1.75; max-width:32rem; margin:0 0 2rem; }

.a-disclaimer{
  margin-top:2.6rem; max-width:44rem;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.9; color:var(--ash);
}

/* offscreen honeypot field */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* form error */
.form-error{
  margin-top:1.2rem; padding:1rem 1.2rem;
  border:1px solid var(--crimson);
  font-size:.85rem; line-height:1.7; color:#D7DFF8;
}
.form-error a{ color:var(--crimson-bright); }

/* ============================================================
   v3 — How we work · Q&A · guide library
   ============================================================ */
.section--process{ border-top:1px solid var(--hairline); }
.process{ list-style:none; counter-reset:pw; margin:0; padding:0; }
.process > li{
  position:relative; margin-left:1.4rem; padding:0 0 2.4rem 3rem;
  border-left:1px solid var(--hairline);
}
.process > li:last-child{ padding-bottom:.6rem; }
.process > li::before{
  counter-increment:pw; content:counter(pw);
  position:absolute; left:-1.25rem; top:-.7rem;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:2.7rem; line-height:1; color:var(--crimson);
  background:var(--white); padding:.3rem 0;
}
.process > li > strong{
  display:block; margin-bottom:.45rem;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem); line-height:1.15; color:var(--obsidian);
}
.process p{ margin:0; max-width:40rem; font-weight:400; line-height:1.8; color:#26262B; }
.process-note{
  margin:1.6rem 0 0 1.4rem; padding:1.1rem 0 0 3rem; border-top:1px solid var(--hairline);
  max-width:40rem; font-size:.92rem; line-height:1.75; color:#45454C;
}

/* Questions & answers */
.qa{ border-top:1px solid var(--hairline); max-width:44rem; margin:0 0 1rem; }
.qa-item{ border-bottom:1px solid var(--hairline); }
.qa-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; gap:1.2rem;
  padding:1.15rem .2rem;
  transition:color .25s ease, padding-left .35s var(--ease-out);
}
.qa-item summary::-webkit-details-marker{ display:none; }
.qa-q{ flex:1; font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.3; }
.qa-icon{ position:relative; flex:none; width:14px; height:14px; align-self:center; }
.qa-icon::before, .qa-icon::after{
  content:""; position:absolute; left:0; top:6px; width:14px; height:2px; background:var(--crimson);
  transition:transform .35s var(--ease-ink);
}
.qa-icon::after{ transform:rotate(90deg); }
.qa-item[open] .qa-icon::after{ transform:rotate(0deg); }
.qa-item summary:hover, .qa-item summary:focus-visible{ color:var(--crimson); padding-left:.6rem; }
.qa-item summary:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }
.qa-a{ padding:0 .2rem 1.2rem 1.1rem; margin-left:.2rem; border-left:2px solid var(--crimson); }
.qa-a p{ font-size:.98rem; margin:0 0 .7rem; }
.qa-a p:last-child{ margin-bottom:0; }

/* Guide library */
.gfilter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.gfilter a{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  color:var(--obsidian); padding:.6rem .95rem; border:1px solid var(--obsidian);
  transition:background .25s ease, color .25s ease;
}
.gfilter a:hover, .gfilter a[aria-current="page"]{ background:var(--obsidian); color:var(--white); }
.gi-all{ margin:1.8rem 0 0; }

/* Contact form additions */
.field label .opt{ text-transform:none; letter-spacing:.02em; color:#8D8D96; }
.form-note a{ color:inherit; }

/* bullet lists inside guides: short ink strokes (Tailwind resets list markers) */
.article-body ul:not(.checklist){ list-style:none; padding-left:0; }
.article-body ul:not(.checklist) > li{ position:relative; padding-left:1.5rem; }
.article-body ul:not(.checklist) > li::before{
  content:""; position:absolute; left:.15rem; top:.82em; width:10px; height:2px;
  background:var(--crimson); border-radius:2px;
}

/* contrast lift on the dark contact section and footer */
#matter-form label{ color:#A6A6AE; }
.field label .opt{ color:#A6A6AE; }
.form-note{ color:#9A9AA2; }
.footer-disclaimer{ color:#8A8A92; }
.footer-bottom p:first-child{ color:#A6A6AE; }
#matter-form input, #matter-form textarea, #matter-form select{ border-bottom-color:#4A4A52; }
.article-body .a-disclaimer{ font-size:.66rem; line-height:1.9; letter-spacing:.12em; color:var(--ash); }
.section--dark .contact-hours{ color:#9A9AA2; }
#matter-form input::placeholder{ color:#6E6E76; font-size:.9rem; }


/* ============================================================
   v4 : ink-pen word, inky flags, pictures in pages
   ============================================================ */
.ink-word{
  font-family:'Yellowtail','Bodoni Moda',cursive; font-weight:400; font-style:normal;
  font-size:1.7em; line-height:.8; color:var(--crimson); letter-spacing:.01em;
  padding:0 .05em; white-space:nowrap;
}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.eyebrow-mid{ text-align:center; }
.eyebrow-side{ justify-self:start; }
.flags{ list-style:none; margin:0; padding:0; display:flex; gap:.7rem; justify-self:end; align-items:center; }
.flag{ display:inline-block; line-height:0; transition:transform .3s var(--ease-ink), opacity .3s; }
.flag-svg{ width:34px; height:23px; display:block; overflow:visible; }
a.flag:hover{ transform:translateY(-2px) rotate(-3deg); }
.flag.is-current .flag-svg{ filter:drop-shadow(0 1px 0 rgba(0,47,167,.35)); }
.flag.is-soon{ opacity:.35; filter:grayscale(1); cursor:default; }
@media (max-width:640px){
  .eyebrow-row{ grid-template-columns:1fr auto; }
  .eyebrow-mid{ display:none; }
}

.a-figure{ margin:2rem 0; }
.a-figure img{ display:block; width:100%; max-width:30rem; height:auto; }
.a-figure figcaption{ font-size:.8rem; color:var(--ash); margin-top:.6rem; letter-spacing:.02em; }

/* v5 : tighter rhythm between Legal Services and How To, ink pictures */
#legal-services{ padding-bottom:clamp(1.5rem, 3vw, 2.5rem); }
#how-to{ padding-top:clamp(3rem, 5vw, 4.5rem); }
.a-banner{ max-width:72rem; margin:0 auto; padding:0 1.5rem; }
.a-banner img{ display:block; width:100%; height:clamp(9rem, 22vw, 17rem); object-fit:cover; }
.gi-thumb{ display:none; }
@media (min-width:900px){
  .gitem{ position:relative; }
  .gi-thumb{ display:block; position:absolute; right:4.5rem; top:50%; width:11rem; height:6.4rem; object-fit:cover;
    transform:translateY(-50%) rotate(-2deg) scale(.92); opacity:0; pointer-events:none; z-index:3;
    transition:opacity .35s ease, transform .5s var(--ease-ink); box-shadow:0 18px 40px rgba(0,20,80,.18); }
  .gitem:hover .gi-thumb{ opacity:1; transform:translateY(-50%) rotate(-2deg) scale(1); }
}
.ink-band{ background:var(--obsidian); line-height:0; }
.ink-band img{ display:block; width:100%; height:clamp(7rem, 18vw, 15rem); object-fit:cover; }