/* Ocampo 1890 identity (design.md): Onyx on Sea Salt as the structural pair,
   Carmine as a pinpoint accent, DM Sans as the structural voice and Fraunces
   only for eyebrows and pull-quotes. Fonts are self-hosted subsets of the
   files in rootsystem/static/fonts. */
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --onyx:#111111; --gunmetal:#31373A; --sea-salt:#F9F9F9; --surface:#FFFFFF;
  --carmine:#B32436; --carmine-600:#8E1B2B; --timberwolf:#D7D7D7; --silver:#AFAFAF;
  --battleship:#878787; --jet:#373737;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --ease:cubic-bezier(.2,0,0,1);
  --measure:66ch;
  --header-h:80px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sea-salt);color:var(--onyx);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--carmine);color:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--carmine);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s var(--ease)}
a:hover{color:var(--carmine-600)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--carmine);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--sans);font-weight:500;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding-inline:max(16px, min(4vw, 40px))}

/* Eyebrow: the Fraunces voice (label-caps token). */
.label{font-family:var(--serif);font-weight:500;font-size:14px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--carmine)}
/* Small metadata caps in DM Sans (jurisdictions, table heads, citations). */
.jur,th,.tag,cite,.creds h3,.cgrid .label{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.skip{position:absolute;left:16px;top:-48px;z-index:20;background:var(--onyx);color:var(--sea-salt);padding:10px 16px;border-radius:4px;text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.skip:hover,.skip:focus{color:var(--sea-salt)}

/* header */
header.top{position:relative;z-index:5;background:color-mix(in srgb,var(--sea-salt) 94%,transparent);border-bottom:1px solid var(--timberwolf)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:14px;flex-wrap:wrap}
.lockup{display:flex;align-items:center;gap:20px;min-width:0}
.lockup img{width:150px;flex-shrink:0}
.lockup .divider{width:1px;align-self:stretch;margin-block:6px;background:var(--timberwolf)}
@media (max-width:419px){.lockup{gap:14px}}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--onyx)}
.brand:hover{color:var(--onyx)}
.brand .name{font-weight:500;font-size:18px;line-height:1.2;letter-spacing:-.005em}
.brand .role{font-family:var(--serif);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--carmine)}
nav{display:flex;gap:6px 24px;flex-wrap:wrap}
nav a{color:var(--onyx);text-decoration:none;font-weight:500;font-size:14px;padding-block:4px}
nav a:hover{color:var(--carmine)}
@media (min-width:860px){
  html{scroll-padding-top:calc(var(--header-h) + 8px)}
  header.top{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px)}
  nav a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:color .2s var(--ease),background-size .32s var(--ease)}
  nav a:hover{background-size:100% 1px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* hero */
.hero{padding-block:clamp(56px,9vw,112px) clamp(48px,6vw,80px)}
.hero h1{font-weight:400;font-size:clamp(40px,6.4vw,72px);line-height:1.05;letter-spacing:-.02em;margin-top:20px;max-width:17ch}
.hero h1 em{font-style:italic;color:var(--carmine)}
.hero .lede{margin-top:28px;max-width:var(--measure);font-size:clamp(18px,1.8vw,20px);color:var(--gunmetal)}
.hero .lede strong{color:var(--onyx);font-weight:500}
.hero-portrait{margin:40px 0 0;max-width:280px}
.hero-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.hero-portrait figcaption{margin-top:10px;font-size:13px;color:var(--gunmetal)}
@media (min-width:860px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);column-gap:clamp(32px,5vw,72px);align-items:start}
  .hero>*{grid-column:1}
  .hero .courts,.hero .cta{grid-column:1/-1}
  .hero-portrait{grid-column:2;grid-row:1/4;align-self:center;margin:0;max-width:none}
}
@media (prefers-reduced-motion:no-preference){.hero-portrait{animation:rise .8s var(--ease) both;animation-delay:.16s}}
.courts{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--onyx)}
.courts div{padding:16px 20px 4px 0;border-right:1px solid var(--timberwolf);min-width:0}
.courts div+div{padding-left:20px}
.courts div:last-child{border-right:0}
.courts .jur{color:var(--carmine)}
.courts .name{font-weight:500;font-size:20px;line-height:1.3;margin-top:6px}
@media (max-width:759px){.courts div,.courts div+div{padding-left:0;border-right:0}.courts div+div{border-top:1px solid var(--timberwolf);padding-top:14px;margin-top:10px}}
.cta{margin-top:44px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.2;letter-spacing:.01em;padding:14px 24px;border-radius:4px;text-decoration:none;border:1px solid var(--onyx);color:var(--onyx);background:transparent;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{background:var(--timberwolf);color:var(--onyx)}
.btn.primary{background:var(--carmine);border-color:var(--carmine);color:#fff}
.btn.primary:hover{background:var(--carmine-600);border-color:var(--carmine-600);color:#fff}

/* sections */
section{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--timberwolf)}
.sec-head{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px 48px;align-items:baseline;margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15}
.sec-head p:not(.label){grid-column:2;max-width:var(--measure);font-size:18px;color:var(--gunmetal)}
@media (max-width:759px){.sec-head{grid-template-columns:1fr;gap:12px}.sec-head p:not(.label){grid-column:1}}

/* standing */
.standing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--onyx);border-bottom:1px solid var(--timberwolf)}
.standing div{padding:22px 18px 24px 0;border-right:1px solid var(--timberwolf);min-width:0}
.standing div+div{padding-left:20px}
.standing div:last-child{border-right:0}
.standing b{display:block;font-weight:400;font-size:clamp(32px,3.6vw,40px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.standing span{display:block;margin-top:12px;font-size:14px;color:var(--gunmetal);line-height:1.45}
@media (max-width:759px){.standing{grid-template-columns:repeat(2,minmax(0,1fr))}.standing div:nth-child(2){border-right:0}.standing div:nth-child(3){padding-left:0;border-top:1px solid var(--timberwolf)}.standing div:nth-child(4){border-top:1px solid var(--timberwolf)}}
.quotes{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px}
blockquote{margin:0;min-width:0}
blockquote p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.45;text-indent:-.4em}
blockquote cite{display:block;margin-top:14px;font-style:normal;color:var(--gunmetal)}

/* docket */
.docket{overflow-x:auto;border-top:1px solid var(--onyx);scrollbar-width:thin;scrollbar-color:var(--silver) transparent}
table{width:100%;border-collapse:collapse;min-width:760px}
th{text-align:left;color:var(--gunmetal);padding:14px 16px 12px 0;border-bottom:1px solid var(--timberwolf)}
td{vertical-align:top;padding:22px 16px 22px 0;border-bottom:1px solid var(--timberwolf);font-size:16px}
td.yr{font-weight:500;font-variant-numeric:tabular-nums lining-nums;color:var(--gunmetal);white-space:nowrap;width:70px}
td.forum{width:28%}
td.forum b{display:block;font-weight:500;font-size:18px;line-height:1.3}
td.forum small{display:block;margin-top:4px;color:var(--gunmetal);font-size:14px}
.tag{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.06em;padding:4px 10px;border-radius:9999px;background:var(--timberwolf);color:var(--onyx)}
.tag.adv{background:transparent;box-shadow:inset 0 0 0 1px var(--timberwolf);color:var(--gunmetal)}
td.issues ul{margin:8px 0 0;padding-left:18px;color:var(--gunmetal)}
td.issues li+li{margin-top:3px}
td.issues li::marker{color:var(--carmine)}
@media (max-width:759px){
  .docket{overflow:visible}
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  tbody tr{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;padding:22px 0;border-bottom:1px solid var(--timberwolf)}
  td{display:block;padding:0;border:0}
  td.yr{grid-row:1 / span 3;width:auto;padding-top:3px}
  td.forum{width:auto}
  td:nth-child(3),td.issues{margin-top:16px}
  td:nth-child(3)::before,td.issues::before{display:block;margin-bottom:4px;font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gunmetal)}
  td:nth-child(3)::before{content:"Dispute"}
  td.issues::before{content:"Questions of Mexican law"}
}
.note{margin-top:18px;font-size:14px;color:var(--gunmetal);max-width:var(--measure)}

/* fields */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border-top:1px solid var(--onyx)}
.field{padding:26px 32px 30px 0;border-bottom:1px solid var(--timberwolf);min-width:0}
.field h3{font-size:24px;line-height:1.25}
.field p{margin-top:10px;color:var(--gunmetal);font-size:16px}
.field .cite{margin-top:14px;font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--carmine);line-height:1.6}

/* process */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--onyx)}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr);gap:8px 32px;padding:24px 0;border-bottom:1px solid var(--timberwolf)}
.steps li::before{content:"§ " counter(s);font-weight:500;font-size:14px;color:var(--carmine);padding-top:3px;font-variant-numeric:tabular-nums}
.steps h3{font-size:20px;line-height:1.3}
.steps p{color:var(--gunmetal);font-size:16px}
@media (max-width:759px){.steps li{grid-template-columns:48px minmax(0,1fr)}.steps p{grid-column:2}}

/* duty panel */
.duty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--timberwolf);border-radius:4px}
.duty div{padding:32px;min-width:0}
.duty div+div{border-left:1px solid var(--timberwolf)}
.duty .jur{color:var(--carmine);font-size:12px;margin-top:0}
.duty h3{font-size:24px;line-height:1.25;margin-top:10px}
.duty p{margin-top:10px;color:var(--gunmetal);font-size:16px}
.duty code{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--onyx);background:var(--sea-salt);box-shadow:inset 0 0 0 1px var(--timberwolf);padding:1px 6px;border-radius:2px;white-space:nowrap}
@media (max-width:759px){.duty{grid-template-columns:1fr}.duty div{padding:24px}.duty div+div{border-left:0;border-top:1px solid var(--timberwolf)}}

/* credentials */
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.creds h3{color:var(--carmine);padding-bottom:12px;border-bottom:1px solid var(--timberwolf);letter-spacing:.08em}
.creds ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.creds li{font-size:16px;line-height:1.5}
.creds li span{display:block;color:var(--gunmetal);font-size:14px;margin-top:2px}
@media (max-width:859px){.creds{grid-template-columns:1fr;gap:36px}}

/* contact (card-inverse: Onyx surface, Sea Salt text) */
.contact{background:var(--onyx);color:var(--sea-salt);border-top:0}
.contact .label,.contact .cgrid .label{color:var(--silver)}
.contact h2{font-weight:400;font-size:clamp(32px,4.4vw,56px);line-height:1.08;letter-spacing:-.02em;max-width:18ch;margin-top:16px}
.contact .lede{margin-top:20px;max-width:var(--measure);color:var(--timberwolf)}
.contact a:focus-visible,.contact button:focus-visible{outline-color:var(--sea-salt)}
.cgrid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;border-top:1px solid var(--jet);padding-top:24px}
.cgrid div{min-width:0}
.cgrid .v{font-weight:500;font-size:20px;line-height:1.4;margin-top:8px;word-break:break-word}
.cgrid .v a{color:var(--sea-salt);text-decoration:none;background:linear-gradient(var(--carmine),var(--carmine)) left bottom/100% 1px no-repeat;padding-bottom:2px}
.cgrid .v a:hover{color:#fff;background-size:100% 2px}
.cgrid .office{font-weight:400;font-size:18px;color:var(--timberwolf)}
.copy{margin-top:12px;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--sea-salt);border:1px solid var(--battleship);padding:7px 12px;border-radius:2px;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.copy:hover{border-color:var(--sea-salt);background:var(--jet)}

/* footer */
footer{background:var(--onyx);color:var(--silver);font-size:14px;border-top:1px solid var(--jet)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;padding-block:32px}
footer .firm img{width:270px}
footer .meta{display:flex;flex-direction:column;gap:6px;text-align:right}
footer a{color:var(--sea-salt);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer a:focus-visible{outline-color:var(--sea-salt)}
@media (max-width:759px){footer .meta{text-align:left}}

@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lede,.courts{animation:rise .8s var(--ease) both}
  .hero .lede{animation-delay:.08s}
  .courts{animation-delay:.16s}
  @keyframes rise{from{transform:translateY(10px)}to{transform:none}}
}